Question

我的角度项目中有一个主要组件，应根据组件user.summary.component的用户选择，将其更新并替换为所有其他组件的数据。我的主要组件位于页眉和页脚之间，并且我有一个名为user.summary.component的左侧导航，其中用户可以在其个人资料信息，卡信息，帐户首选项和订单之间进行选择。

当用户从user.summary.component中选择配置文件信息时，应使用配置文件信息详细信息更新我的主要组件。同样，卡信息，帐户首选项和订单信息应代替主要内容。

我的main.component.html看起来像这样：

<app-main-body>

  <h4 body-content>  profile info body content here</h4>
  <h4 body-header> profile header here</h4>
  <h4 body-footer>  profile footer here</h4>

</app-main-body>

当用户从user.summary.component中选择profile.information链接时，profile.information.component应该替换主要组件模板的内容：

<app-main-body>

  <h4 body-content>  account preferences body content here</h4>
  <h4 body-header> account preferences header here</h4>
  <h4 body-footer>  account preferences footer here</h4>

</app-main-body>

当用户从user.summary.component中选择account.preferences链接时，account.preferences.component应该替换主要组件模板的内容：

{{1}}

我已经浏览了该博客上的几篇文章，并且能够弄清楚如何将数据从组件传递到另一个组件，但是不能弄清楚如何替换主要组件的内容并根据用户选择注入模板。

Angular 2 passing value between components

Answer 1

我不确定我是否理解您的问题，但这是实现此目的的两种方法。

1）将组件与* ng-if

一起使用

2）使用路由

但是对于这两种方法，您都需要为个人资料信息，卡信息，帐户首选项和订单分别创建单独的组件。

如果您想使用* ng-if做到这一点，请执行以下操作。

main.component.html

<user.summary [onSectionChange]="changeSection($event)"></user.summary>

<profile.info *ngIf="selected == '1'"></profile.info>
<card.info *ngIf="selected == '2'"></card.info>
<account.pref *ngIf="selected == '3'"></account.pref>
<orders *ngIf="selected == '3'"></orders>

main.component.ts

selected: number = 1; // show profile.info by default
...
onSectionChange(section: number) {
  this.selected = section;
}

user.summary.component.ts

...
onSelectView(option: number) {
  this.onSectionChange.emit(option);
}

根据用户选择的角度动态替换主要组件内容

1 个答案: