为什么在 *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:
这篇关于为什么在 *ngif 上使用 ViewContainerRef?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!