angular - dom中另一个位置的角度重用组件，无需重新初始化

Question

在我们的 Angular (v11) 应用程序中，我们在 DOM 中的不同位置多次使用某些组件，并使用 ngIf 切换它们。主要是因为响应式设计决策。例子：

<comp1 ngIf*="mobile">

...在另一个位置，可能在其他一些组件中：

<comp1 ngIf*="desktop">

当我们切换视图时，这种情况下 Angular 的默认行为是，从位置 1 的 dom 中删除标签，组件将被杀死，标签添加到 dom 中的其他位置 2，组件将再次重新初始化。

我们可以在不改变任何组件的情况下以某种方式在 DOM 中的另一个位置重用这个组件吗？

标签： angular

Answer 1

如果你不想触发组件生命周期，那么使用ngClasscss定义你的定位规则呢？就像是

<div [ngClass]="isMobile ? 'mobile' : 'desktop'"></div>

和你的CSS：

.mobile {
   top: 1px;
}

.desktop {
   top: 100px;
}

这种方式只更新外观并保留组件状态。