如何在 Angular2 中隐藏和替换组件

你好，我有一个父组件 (A)，它有 2 个子组件（B 和 C）。父级A默认显示子组件B。现在，当单击父级A上显示的按钮时，它将用子组件C替换子组件B。在Angular2中单击按钮后，如何用组件C替换组件B？

为此，您可以使用*ngIf https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html指令或hidden财产。

注意区别：

• *ngIf删除并重新创建元素：

如果分配给 ngIf 的表达式计算结果为 false 值，则 元素从 DOM 中删除，否则元素的克隆是 重新插入到 DOM 中。

• hidden使用隐藏元素display: none

从角度来看文档 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf:

显示/隐藏技术可能适合小元素树。我们 隐藏大树时应小心谨慎； NgIf 可能是更安全的选择。 在匆忙下结论之前一定要先进行衡量。

检查下面的示例：

@Component({
  selector: 'my-app',
  template: `
    <b>Using *ngIf:</b>
    <div *ngIf="!isOn">Light Off</div>
    <div *ngIf="isOn">Light On</div>
    <br />
    <b>Using [hidden]:</b>
    <div [hidden]="isOn">Light Off</div>
    <div [hidden]="!isOn">Light On</div>
    <br />
    <button (click)="setState()">{{ getButtonText() }}</button>
  `
})
export class AppComponent {

  private isOn: boolean = false;

  getButtonText(): string {
    return `Switch ${ this.isOn ? 'Off' : 'On' }`;
  }
  setState(): void {
    this.isOn = !this.isOn;
  }

}

笨蛋：http://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0 http://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0

如需进一步阅读有关[hidden]，我指出这篇文章：http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

希望有帮助。