在运用angular举行开辟的时刻,经由过程属性绑定向组件内部传值的体式格局,有时刻并不能完整满足需求,比方我们写了一个大众组件,然则某个模板运用这个大众组件的时刻,须要在其内部增加一些标签内容,这类情况下,除了运用ngIf
/ngSwitch
预先在组件内部定义以外,就能够运用ngTemplateOutlet
指令向组件传入内容.
ngTemplateOutlet
指令类似于angularjs中的ng-transclude
,vuejs中的slot
.
ngTemplateOutlet
是结构型指令,须要绑定一个TemplateRef
范例的实例.
运用体式格局以下:
@Component({
selector: 'app',
template: `
<h1>Angular's template outlet and lifecycle example</h1>
<app-content [templateRef]="nestedComponentRef"></app-content>
<ng-template #nestedComponentRef let-name>
<span>Hello {{name}}!</span>
<app-nested-component></app-nested-component>
</ng-template>
`,
})
export class App {}
@Component({
selector: 'app-content',
template: `
<button (click)="display = !display">Toggle content</button>
<template
*ngIf="display"
*ngTemplateOutlet="templateRef context: myContext">
</template>
`,
})
export class Content {
display = false;
@Input() templateRef: TemplateRef;
myContext = {$implicit: 'World', localSk: 'Svet'};
}
@Component({
selector: 'app-nested-component',
template: `
<b>Hello World!</b>
`,
})
export class NestedComponent implements OnDestroy, OnInit {
ngOnInit() {
alert('app-nested-component initialized!');
}
ngOnDestroy() {
alert('app-nested-component destroyed!');
}
}
代码中除了根组件外定义了两个组件
- 容器组件:
app-content
- 通报进去的内容组件:
app-nested-component
app-content
组件吸收一个TemplateRef
范例的输入属性templateRef
,并在模板中将其绑定到了ngTemplateOutlet
指令,当组件吸收到templateRef
属性时,就会将其衬着到ngTemplateOutlet
指令地点的位置.
上例中,app-content
组件templateRef
属性的泉源,是在根组件的模板内,直接经由过程#
标记猎取到了app-nested-component
组件地点<ng-template>
的援用并传入的.
在现实运用中,除了这类体式格局,也能够直接在组件内部猎取TemplateRef
范例的属性并绑定到ngTemplateOutlet
指令.
比方在容器组件为模态框的情况下,并不能经由过程模板传值,就能够运用下面这类体式格局:
@ViewChild('temp') temp: TemplateRef<any>
openDialog(){
this.dialog.open(ViewDialogComponent, {data: this.temp)
}
在容器组件中还能够定义被通报内容的高低文(上例app-content
组件中的myContext
属性),个中的$implicit
属性作为默认值,在被通报的内容中能够以重命名的体式格局接见(上例let-name
),关于高低文中其他的属性,就须要经由过程let-属性名
的体式格局接见了.