如何將變量從一個組件傳遞到另一個組件並在第二個組件模板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這可能會有所幫助。如果你仍然無法找到解決方案，我會幫助你。