ng-template是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。
& lt; ng-template # loading>
& lt;按钮(点击)="登录()“祝辞login
& lt;按钮(点击)=" sigup()“祝辞sigup
& lt;/ng-template>
& lt; ng-container * ngTemplateOutlet=凹釉亍北?
& lt;/ng-container>
ng-template在编写高定制性的组件时非常有用。可以把需要定制的内容作为模板传到组件中。
<强> ngTemplateOutlet的作用
该指令用于基于已有的TemplateRef对象,插入对应的内嵌视图。在应用NgTemplateOutlet指令时,我们可以通过[ngTemplateOutletContext]属性来设置EmbeddedViewRef的上下文对象。绑定的上下文应该是一个对象,此外可通过让语法来声明绑定上下文对象属性名。
<强>,ngTemplateOutlet的使用
从“@angular进口{组件}/核心”;
@ component ({
选择器:“app-root”,
模板:
& lt; ng-template # stpl>
你好,Semlinker !
& lt;/ng-template>
& lt; ng-template # atpl>
你好,角!
& lt;/ng-template>
& lt; div [ngTemplateOutlet]=" atpl "祝辞& lt;/div>
& lt; div [ngTemplateOutlet]=" stpl "祝辞& lt;/div>
`，
})
出口类AppComponent {}
<强>,ngOutletContext的使用
从“@angular进口{组件}/核心”;
@ component ({
选择器:“app-root”,
模板:
& lt; ng-template # stpl let-message="消息"比;
& lt; p>{{消息}}& lt;/p>
& lt;/ng-template>
& lt; ng-template # atpl let-msg="消息"比;
& lt; p>{{味精}}& lt;/p>
& lt;/ng-template>
& lt; ng-template # otpl let-msg>
& lt; p>{{味精}}& lt;/p>
& lt;/ng-template>
& lt; div [ngTemplateOutlet]=" atpl "
[ngOutletContext]=吧舷挛摹北?
& lt;/div>
& lt; div [ngTemplateOutlet]=" stpl "
[ngOutletContext]=吧舷挛摹北?
& lt;/div>
& lt; div [ngTemplateOutlet]=" otpl "
[ngOutletContext]=吧舷挛摹北?& lt;/div>
`，
})
出口类AppComponent {={上下文信息:“你好ngOutletContext !”
美元隐:“你好,Semlinker !'};
}
以上所述是小编给大家介绍的角中的ng-template及角使用ngTemplateOutlet指令的方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
