为什么使用 ViewContainerRef 而不是 *ngif？

Question

我可以做到

<my-awesome-component *ngIf="ConditionToIncludeComponent"></my-awesome-component>

但是每个关于在 dom 中动态插入组件的文档都是基于 ViewContainerRef 的。我喜欢它的作用。但是是什么让它比 *ngif 如此特别？

只是指出两者的优缺点。请。 谢谢！

Answer 1

TLDR;

如果您在组合此模板时不知道组件模板中将使用什么组件，请使用 viewContainerRef。如果您事先知道该组件但它有时会被隐藏，请使用 ngIf.

说明

ViewContainerRef用于指定动态组件的插入点。使用ngIf时需要提前html指定组件。因此，如果您有一个要插入三个组件之一的位置，则需要执行以下操作：

<my-awesome-component1 *ngIf="ConditionToIncludeComponent1"></my-awesome-component1>
<my-awesome-component2 *ngIf="ConditionToIncludeComponent2"></my-awesome-component2>
<my-awesome-component3 *ngIf="ConditionToIncludeComponent3"></my-awesome-component3>

而 viewContainerRef 你只需要一个位置（通常使用 `ng-container 指定）。使用 ngComponentOutlet 可以这样做：

template: `<ng-container ngComponentOutlet="componentToInsert"></ng-container>`

class MyComponent {

   const myAwesomeComponent1 = cfr.resolveComponentFactory(MyAwesomeComponent1);
   const myAwesomeComponent2 = cfr.resolveComponentFactory(MyAwesomeComponent1);
   const myAwesomeComponent3 = cfr.resolveComponentFactory(MyAwesomeComponent1);
       
    if (ConditionToIncludeComponent1) {
        componentToInsert = myAwesomeComponent1;
    else if (ConditionToIncludeComponent2) {
        componentToInsert = myAwesomeComponent2;
    else if (ConditionToIncludeComponent3) {
        componentToInsert = myAwesomeComponent3;

或使用createComponent方法手动组件：

template: `<ng-container #spot></ng-container>`

class MyComponent {
   @ViewChild('spot', {read: ViewContainerRef}) vc;

   const myAwesomeComponent1 = cfr.resolveComponentFactory(MyAwesomeComponent1);
   const myAwesomeComponent2 = cfr.resolveComponentFactory(MyAwesomeComponent1);
   const myAwesomeComponent3 = cfr.resolveComponentFactory(MyAwesomeComponent1);
       
    if (ConditionToIncludeComponent1) {
        vc.createComponent(myAwesomeComponent1);
    else if (ConditionToIncludeComponent2) {
        vc.createComponent(myAwesomeComponent2);
    else if (ConditionToIncludeComponent3) {
        vc.createComponent(myAwesomeComponent3);

除了不便和臃肿的 html 模板之外，ngIf 方法的更大问题是性能影响，因为三个 ngIf 指令必须在每个更改检测周期执行一些逻辑。

阅读更多信息：

• Exploring Angular DOM manipulation techniques using ViewContainerRef