在使用角进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共组件的时候,需要在其内部添加一些标签内容,这种情况下,除了使用ngIf/ngSwitch预先在组件内部定义之外,就可以利用ngTemplateOutlet指令向组件传入内容。
ngTemplateOutlet指令类似于angularjs中的ng-transclude, vuejs中的槽。
ngTemplateOutlet是结构型指令,需要绑定一个TemplateRef类型的实例。
使用方式如下:
@ component ({
选择器:“应用程序”,
模板:
& lt; h2>出口角的模板和生命周期example
& lt; app-content [templateRef]=" nestedComponentRef "祝辞& lt;/app-content>
& lt; ng-template # nestedComponentRef let-name>
& lt; span>你好{{名称}}! & lt;/span>
& lt; app-nested-component> & lt;/app-nested-component>
& lt;/ng-template>
｀，
}）
出口类应用{}
@ component ({
选择器:“app-content”,
模板:
& lt;按钮(点击)="显示=!显示“在切换content
& lt;模板
* ngIf="显示"
* ngTemplateOutlet=皌emplateRef上下文:myContext”比;
& lt;/template>
｀，
}）
{出口类内容
显示=false;
@Input () templateRef: templateRef;
myContext={$隐式:‘世界’,localSk: ' Svet '};
}
@ component ({
选择器:“app-nested-component”,
模板:
& lt; b> Hello World ! & lt;/b>
｀，
}）
出口类NestedComponent实现>
@ViewChild(临时的)临时:TemplateRef
openDialog () {
this.dialog。打开(ViewDialogComponent{数据:this.temp)
}
之前
在容器组件中还可以定义被传递内容的上下文(上例app-content组件中的myContext属性),其中美元的隐式属性作为默认值,在被传递的内容中可以以重命名的方式访问(上例let-name),对于上下文中其他的属性,就需要通过让——属性名的方式访问了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
