使用 *ngIf 重新渲染组件答案

【问题标题】：Rerender the component with *ngIf使用 *ngIf 重新渲染组件
【发布时间】：2017-12-13 09:12:43
【问题描述】：

是否可以在任何条件下使用 *ngIf 重新渲染组件？我认为我可以使超时，大约 200 毫秒，然后将组件值分配为 null，更新组件值并重新渲染。但是是否可以在不超时和更改组件值的情况下重新渲染？

例子：

@Component({})

export class RepComponent implements OnInit {
  component: any;
  
  constructor() {}


  ngOnInit() {
    this.component = this.route.snapshot.data['component'];
  }  
}

<div *ngIf="component.type === 'Text'">
<!-- ... -->
</div>

<div *ngIf="component.type === 'Image'">
<!-- ... -->
</div>

因此，由于示例，我需要如果 component.type 是“图像”，则组件本身会使用新数据重新呈现。

【问题讨论】：

我不能 100% 确定我是否正确理解了您的问题，但您可以查看 this 以获取基于 *ngIf 再次销毁和重新初始化组件的示例
为什么要销毁并重新创建它？你想达到什么目的？只需更改组件的状态就足够了。
@JBNizet 我需要创建独特的组件
如果您需要帮助，请详细说明。这对我来说没有任何意义。解释你的用例是什么。

标签： angular

【解决方案1】：

*ngIf 已经在做你想做的事了。当条件不满足时，它会从 DOM 中销毁组件的 html 部分。

也许您应该在 ngOnInit 中使用与 html 中相同的变量？

ngOnInit() {
    this.component = this.route.snapshot.data[this.component.type];
  }

希望这有帮助

【讨论】：