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

Question

我有一个仪表板，其中包含登录用户所属的组列表。现在当用户点击任何组时，组的基本信息如名称、描述等会打印在 page.It 的右侧，就像这样。

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

您有两种选择，可以使用 navparams 或 @ViewChild。这真的取决于您的要求。

对于您的情况，我建议使用简单的导航参数。这里是 the link 可能会有帮助。如果您仍然无法找到解决方案，我会帮助您。

Answer 2

您正在尝试无法完成的事情...意思是以下行：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 共享服务的更多信息。

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

How to pass variable from one component to another component and print that variable in 2nd Component template html file?

typescript

angular2-routing

angular2-components

angular