模板语法
服务端渲染
API / @angular/common

NgTemplateOutlet

Inserts an embedded view from a prepared TemplateRef.

根据一个提前备好的 TemplateRef 插入一个内嵌视图。

@Directive({ selector: '[ngTemplateOutlet]' }) class NgTemplateOutlet implements OnChanges { ngTemplateOutletContext: Object ngTemplateOutlet: TemplateRef<any> ngOnChanges(changes: SimpleChanges) }

选择器

[ngTemplateOutlet]

输入参数

ngTemplateOutletContext 绑定到 NgTemplateOutlet.ngTemplateOutletContext
ngTemplateOutlet 绑定到 NgTemplateOutlet.ngTemplateOutlet

说明

You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.

你可以通过设置 [ngTemplateOutletContext] 来给 EmbeddedViewRef 附加一个上下文对象。 [ngTemplateOutletContext] 是一个对象，该对象的 key 可在模板中使用 let 语句进行绑定。

Note: using the key $implicit in the context object will set its value as default.

注意：在上下文对象中使用 $implicit 这个 key 会把对应的值设置为默认值。

Example

例子

@Component({ selector: 'ng-template-outlet-example', template: ` <ng-container *ngTemplateOutlet="greet"></ng-container> <hr> <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container> <hr> <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container> <hr> <ng-template #greet><span>Hello</span></ng-template> <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template> <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template> ` }) class NgTemplateOutletExample { myContext = {$implicit: 'World', localSk: 'Svet'}; }

属性

属性名类型说明
ngTemplateOutletContext
ngTemplateOutlet

方法

ngOnChanges()

ngOnChanges(changes: SimpleChanges)

参数

changes

Type: SimpleChanges.

使用说明

<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>