为什么在* 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屋！