查看: 280|回复: 0

[HTML代码] 扣丁学堂HTML5开发解析Angular中ng-template及ngTemplateOutlet指令方法

发表于 2018-8-10 14:26:17
  今天扣丁学堂HTML5培训老师给大家分享一篇关于Angular中的ng-template及angular使用ngTemplateOutlet指令方法的介绍,ng-template是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。下面我们一起来看一下吧。
​  <ng-template#loading>
  <button(click)="login()">login</button>
  <button(click)="sigup()">sigup</button>
  </ng-template>
  <ng-container*ngTemplateOutlet="loading">
  </ng-container>
  ng-template在编写高定制性的组件时非常有用。可以把需要定制的内容作为模板传到组件中。
  下面看下angular使用ngTemplateOutlet指令
  ngTemplateOutlet的作用
  该指令用于基于已有的TemplateRef对象,插入对应的内嵌视图。在应用NgTemplateOutlet指令时,我们可以通过[ngTemplateOutletContext]属性来设置EmbeddedViewRef的上下文对象。绑定的上下文应该是一个对象,此外可通过let语法来声明绑定上下文对象属性名。
  ngTemplateOutlet的使用
  import{Component}from'@angular/core';
  @Component({
  selector:'app-root',
  template:`
  <ng-template#stpl>
  Hello,Semlinker!
  </ng-template>
  <ng-template#atpl>
  Hello,Angular!
  </ng-template>
  <div[ngTemplateOutlet]="atpl"></div>
  <div[ngTemplateOutlet]="stpl"></div>
  `,
  })
  exportclassAppComponent{}
  ngOutletContext的使用
  import{Component}from'@angular/core';
  @Component({
  selector:'app-root',
  template:`
  <ng-template#stpllet-message="message">
  <p>{{message}}</p>
  </ng-template>
  <ng-template#atpllet-msg="message">
  <p>{{msg}}</p>
  </ng-template>
  <ng-template#otpllet-msg>
  <p>{{msg}}</p>
  </ng-template>
  <div[ngTemplateOutlet]="atpl"
  [ngOutletContext]="context">
  </div>
  <div[ngTemplateOutlet]="stpl"
  [ngOutletContext]="context">
  </div>
  <div[ngTemplateOutlet]="otpl"
  [ngOutletContext]="context"></div>
  `,
  })
  exportclassAppComponent{
  context={message:'HellongOutletContext!',
  $implicit:'Hello,Semlinker!'};
  }
  以上就是关于扣丁学堂HTML5开发Angular中的ng-template及angular使用ngTemplateOutlet指令的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!



回复

使用道具 举报