为什么在 *ngif 上使用 ViewContainerRef? [英] Why use ViewContainerRef over *ngif?

问题描述

我只能做

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

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

But every document on inserting component in dom dynamically is based on ViewContainerRef. I like what it does. But what makes it so special over *ngif?

请指出两者的优缺点.请.谢谢！

Just point out pros and cons of both. Please. Thanks!

推荐答案

TLDR;

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

TLDR;

If you don't know what component will be used in a component template when putting together this template use viewContainerRef. If you do know the component beforehand but it can sometimes be hidden, use ngIf.

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

ViewContainerRef is used to specify the insertion point of the dynamic component. When using ngIf you need to specify the component in html in advance. So if you have a spot where you will insert one of three components you will need to do the following:

<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 可以这样做:

Whereas with viewContainerRef you need only one spot (usually specified using `ng-container). Using ngComponentOutlet it can be done like this:

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方法手动组件:

Or component manually using createComponent method:

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 指令必须在每个变更检测周期执行一些逻辑.

Besides inconvenience and a bloated html template the bigger problem with the ngIf approach is performance impact since three ngIf directives will have to perform some logic on each change detection cycle.

欲了解更多信息，请阅读:

For more information read:

• 使用 ViewContainerRef 探索 Angular DOM 操作技术

这篇关于为什么在 *ngif 上使用 ViewContainerRef?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！