如何将变量从一个组件传递到另一个组件并在第二个组件模板html文件中打印该变量？

Question

我有一个仪表板，其中有登录用户组的列表。现在当用户点击任何一个组时，该组的基本信息如名称，描述等将打印在页面的右侧。这是类似的。

HomeComponent有一个名为GroupComponent子组件。我正在尝试将组对象从HomeComponent传递给GroupComponent，它将打印它的名称。下面是我曾尝试代码：

routes.ts

export const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'login', component: LoginComponent}, 
    { 
    path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
    children: [ 
     {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, 
     {path: 'group', component: GroupComponent}, 
     {path: 'dashboard', component: DashboardComponent} 
    ] 
    } 
]; 

home.component.ts

export class HomeComponent implements OnInit { 
    user: string; 
    user_id: number; 
    group_list: string[]; 

    constructor(public router: Router, private _groupService: GroupService) { 
    // xyz code 
    } 

    ngOnInit() { 
    } 

    getUserGroups() { 
    let body: string = '{}'; 
    this._groupService.getAllUserGroups(body).subscribe(
     auth => { 
     let payload = auth.json(); 
     this.group_list = payload.list; 
     }, 
     error => { 
     console.log(error); 
     } 
    ); 
    } 

    goToGroupDetail(group) { 
    console.log(group.id); 
    let groupObj = new GroupComponent(group.name); 
    this.router.navigate(['/home/group']); 
    } 

} 

home.component.html

<ul class="nav navbar-nav navbar-right"> 
      <li *ngFor="let group of group_list"><a (click)="goToGroupDetail(group);">{{group.name}}</a></li> 
      </ul> 

个

group.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-group', 
    templateUrl: './group.component.html', 
    styleUrls: ['./group.component.css'] 
}) 
export class GroupComponent implements OnInit { 
    group_name:string; 

    getGroupName(): string { 
    return this.group_name; 
    } 

    setGroupName(value){ 
    this.group_name = value; 
    } 

    constructor(name:string) { 
    this.setGroupName(name); 
    } 
    ngOnInit() { 
    } 

} 

group.component.html

<p> 
    group works! 
</p> 
<div class="col-md-6"> 
    <h2>Name of the Group : {{group_name}}</h2> 
</div> 

我得到这样那样的错误：

Answer 1

您正在尝试一些无法完成的工作......意思是以下行：let groupObj = new GroupComponent(group.name);，然后期望能够在构造函数中获取注入的值。

这里在组件之间共享数据最常见的情况是使用共享服务。

Sp使用共享服务BehaviorSubject在路由之前，先设置组，然后在您的GroupComponent中订阅该主题。

在你GroupService，导入BehaviorSubject并声明如下：

import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

private group = new BehaviorSubject<string>(null); 

group$ = this.group.asObservable(); 

emitGroup(group: string) { 
    this.group.next(group); 
} 

而在你HomeComponent组传递给服务：

goToGroupDetail(group) { 
    console.log(group.id); 
    this._groupService.emitGroup(group); // here 
    this.router.navigate(['/home/group']); 
} 

，然后在GroupComponent您可以订阅这在构造函数中：

constructor(private _groupService: GroupService) { 
    _groupService.group$.subscribe(group => { 
    this.group_name = group; // assign value here 
    }); 
} 

更多关于official docs的共享服务。

Answer 2

你有两个选择要么你可以使用navparams或@ViewChild。这真的取决于你的要求。

就你而言，我会建议去简单的navparams。这里是the link这可能会有所帮助。如果你仍然无法找到解决方案，我会帮助你。