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

您可以使用navparams或@ViewChild两个选项。这实际上取决于你的要求。

在你的情况下，我建议选择简单的navparams。这是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文件中打印该变量？

2 个答案: