标签：tar dynamic base ops str learn title blog amp
For example, we have a modal component, it can config that using ng-template as a configurable template.
<ng-template #auModalBody></ng-template> <au-modal [body]="auModalBody" ></au-modal>
Now what we want to do is to pass in inputs to ng-templates so that template can change dynamiclly according to the inputs.
For example:
<ng-template #auModalBody let-title="title" <!-- define a title prop --> let-tabActivated=loginTabActivated <!-- define a tabActivated prop --> > <!-- we can use ‘title‘ & ‘tabActivated‘ props here --> <h2>{{title}}</h2> <tab [selected]="tabActivated" #login /> <tab [selected]="!tabActivated" #signUp /> </ng-template> <au-modal [body]="auModalBody" [context]="{ title: ‘Login or Sign up‘, tabActivated: loginTabActivated <!-- based on those variables we passed in--> }"></au-modal>
To do that, we need to add an @Input to au-modal component:
@Input() context: any; <ng-container *ngIf="body; else projectionBody"> <ng-container *ngTemplateOutlet="body; context:context" ></ng-container> </ng-container>
See the commit: Github
[Angular] Learn How To Use ng-template Inputs
标签：tar dynamic base ops str learn title blog amp
原文地址：http://www.cnblogs.com/Answer1215/p/7107032.html
