4

您好，我有一个父组件（A），它有 2 个子组件（B 和 C）。默认情况下，父 A 显示子组件 B。现在，当单击父 A 上显示的按钮时，它会将子组件 B 替换为子组件 C。在 angular2 中单击按钮后，如何将组件 B 替换为组件 C？

4

2 回答 2

9

为此，您可以使用*ngIf指令或hidden属性。

注意区别：

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

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

  • hidden使用隐藏元素display: none

来自 Angular 的文档：

显示/隐藏技术可能适用于小元素树。隐藏大树时要小心；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;
  }

}

Plunker：http ://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0

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

希望有帮助。

于 2016-07-19T01:32:26.727 回答
5

通常，您会在 Parent A 的模板中拥有这两个组件，但您会使用 anngIf使它们仅在它们应该出现时出现。

<button (click)="setButtonClicked(true)">Click Me</button>
<component-b *ngIf="!buttonWasClicked"></component-b>
<component-c *ngIf="buttonWasClicked"></component-c>

在父 A 的模型中，您将有相应的代码来设置属性：

buttonWasClicked: boolean = false;

setButtonClicked(clicked: boolean) {
    this.buttonWasClicked = clicked;
}

您可能更喜欢使用NgSwitch而不是NgIf.

于 2016-07-18T22:45:36.207 回答