扣丁学堂HTML5开发Angular中ngtemplate及ng

　　今天扣丁学堂HTML5培训老师给大家分享一篇关于Angular中的ng-template及angular使用ngTemplateOutlet指令方法的介绍，ng-template是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。下面我们一起来看一下吧。

​　　

　　login

　　sigup

　　

　　ng-template在编写高定制性的组件时非常有用。可以把需要定制的内容作为模板传到组件中。

　　下面看下angular使用ngTemplateOutlet指令

　　ngTemplateOutlet的作用

　　该指令用于基于已有的TemplateRef对象，插入对应的内嵌视图。在应用NgTemplateOutlet指令时，我们可以通过[ngTemplateOutletContext]属性来设置EmbeddedViewRef的上下文对象。绑定的上下文应该是一个对象，此外可通过let语法来声明绑定上下文对象属性名。

　　ngTemplateOutlet的使用

　　import{Component}from'@angular/core';

　　@Component({

　　selector:'app-root',

　　template:`

　　

　　Hello,Semlinker!

　　

　　Hello,Angular!

　　

　　

　　`,

　　})

　　exportclassAppComponent{}

　　ngOutletContext的使用

　　import{Component}from'@angular/core';

　　@Component({

　　selector:'app-root',

　　template:`

　　

　　

{{message}}

　　

　　

{{msg}}

　　

　　

{{msg}}

　　[ngOutletContext]="context">

　　[ngOutletContext]="context">

　　[ngOutletContext]="context">

　　`,

　　})

　　exportclassAppComponent{

　　context={message:'HellongOutletContext!',

　　$implicit:'Hello,Semlinker!'};

　　}

　　以上就是关于扣丁学堂HTML5开发Angular中的ng-template及angular使用ngTemplateOutlet指令的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！