Angular 2 - ngIf Alternative 每次 ngIf 值更改时都不会初始化组件答案

【问题标题】：Angular 2 - ngIf Alternative which does not initialize the component evertime the ngIf value changesAngular 2 - ngIf Alternative 每次 ngIf 值更改时都不会初始化组件
【发布时间】：2018-10-09 10:39:33
【问题描述】：

我有一个自定义选项卡实现，我用一些像这样的 ngIf 指令显示选项卡内容：

<tab1 *ngIf="condition === 1"></tab1>
<tab2 *ngIf="condition === 2"></tab2>

选项卡有自己的表单，有些内容只需要初始化一次就可以了。使用我当前的实现，每次我更改条件然后更改选项卡时，组件 tab1 和 tab2 都会再次初始化。

我们是否还有其他 ngIf 替代方案（可能像旧的 ng-show），它不会再次初始化组件，只是淡入 UI 上的新内容。否则我必须用 css 来做（不显示）。

【问题讨论】：

也许使用 [hidden] 这不会从 DOM 中删除标签。
可以将ngIf移动到tab组件内部，然后只能初始化一次，但不显示内容
console.log(condition)
@AJT_82 你也可以这样写作为答案.. 我会接受的；）谢谢

标签： angular angular6

【解决方案1】：

您可以使用[hidden] 代替*ngIf。

与*ngIf 不同，hidden 并没有完全从 DOM 中删除内容，它只是......好吧，隐藏它；）

【讨论】：

【解决方案2】：

建议[hidden]，但它只是display: none 的本机属性，任何其他覆盖显示属性的CSS 将具有更高的优先级。所以你真的应该这样做：

[class.my-hidden-class]="condition" 或者 [style.display]="condition ? 'none' : null" 或者更好地使用以下命令制作自己的指令：

@Input()
visible = true;

@HostBinding('style.display')
get display(): 'none' | null {
    return this.visible ? null : 'none';
}

【讨论】：

【解决方案3】：

你可以这样做。这将隐藏您的组件而无需初始化

试试这个

<tab1 [style.display]="condition == 1?'none': 'block'"></tab1>

如果不工作，这应该工作

<div [style.display]="condition == 1?'none': 'block'">
<tab1></tab1>
</div>

【讨论】：