Question

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

Answer 1

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

注意区别：

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

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

hidden使用display: none

来自棱角分明的documentation：

显示/隐藏技术对于小元素树来说可能很好。我们隐藏大树时要小心; 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

希望有所帮助。

Answer 2

通常，您在父A模板中同时拥有这两个组件，但是您只能使用ngIf使它们仅在它们应该出现时出现。< / p>

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

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

buttonWasClicked: boolean = false;

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

您可能更愿意使用NgSwitch代替NgIf。

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

2 个答案: