typescript 如何隐藏和替换 Angular2 中的组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38446997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide and replace a component in Angular2
提问by EI-01
Hello i have a parent component (A) and it has 2 child components (B and C). Parent A by default displays child component B. Now when a button is clicked that is displayed on parent A, it replaces child component B with child component C. How can i replace component B with Component C after the button is clicked in angular2?
您好，我有一个父组件 (A)，它有 2 个子组件（B 和 C）。默认情况下，父 A 显示子组件 B。现在，当单击父 A 上显示的按钮时，它会将子组件 B 替换为子组件 C。在 angular2 中单击按钮后，如何将组件 B 替换为组件 C？
回答by Alexandre Junges
To do that you can use the *ngIfdirective or the hiddenproperty.
为此，您可以使用*ngIf指令或hidden属性。
Note the difference:
注意区别：
*ngIfremoves and recreates the element:
*ngIf删除并重新创建元素：
If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
如果分配给 ngIf 的表达式的计算结果为 false 值，则该元素将从 DOM 中删除，否则该元素的副本将重新插入 DOM 中。
hiddenhides the element usingdisplay: none
hidden使用隐藏元素display: none
From angular`s documentation:
来自 angular 的文档：
The show/hide technique is probably fine for small element trees. We should be wary when hiding large trees; NgIf may be the safer choice. Always measure before leaping to conclusions.
显示/隐藏技术可能适用于小元素树。隐藏大树时要小心；NgIf 可能是更安全的选择。在得出结论之前，请务必先衡量。
Check the example below:
检查下面的例子：
@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
Plunker：http://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0
For further reading about [hidden], I indicate this article: http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
为了进一步阅读[hidden]，我指出这篇文章：http: //angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
Hope that helps.
希望有帮助。
回答by StriplingWarrior
Typically you'd have both components in Parent A's template, but you'd use an ngIfto cause them to appear only when they're supposed to.
通常，您会在父 A 的模板中同时拥有这两个组件，但您会使用 anngIf使它们仅在应该出现时出现。
<button (click)="setButtonClicked(true)">Click Me</button>
<component-b *ngIf="!buttonWasClicked"></component-b>
<component-c *ngIf="buttonWasClicked"></component-c>
In Parent A's model, you'd have corresponding code to set the property:
在 Parent A 的模型中，您有相应的代码来设置属性：
buttonWasClicked: boolean = false;
setButtonClicked(clicked: boolean) {
this.buttonWasClicked = clicked;
}
You may prefer to use NgSwitchinstead of NgIf.
您可能更喜欢使用NgSwitch代替NgIf。
