Angular 2-ngIf Alternative，它在ngIf值更改时不会初始化组件

Question

我有一个自定义的标签实现，在其中我用一些ngIf指令显示标签内容：

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

制表符有其自身的形式，某些内容仅应初始化一次，不再需要初始化。在我当前的实现中，每次我更改条件然后更改选项卡时，都会再次初始化组件tab1和tab2。

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

Answer 1

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

与*ngIf相反，hidden并没有完全从DOM中删除内容，只是...好吧，将其隐藏;）

Answer 2

建议使用

[hidden]，但这只是display: none的本机属性，其他任何覆盖display属性的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';
}

Answer 3

您可以执行此操作。这将隐藏您的组件而无需初始化

尝试

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

如果不起作用，那应该起作用

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