微信小程序申请_Angular中的ng

发布时间:2021-01-08 13:38 作者:jianzhan

摘要: Angular中的ng-template及angular 应用ngTemplateOutlet 命令的方式 ng-template 是用于界定模版的,当应用ng-template界定好一个模版以后,能够用ng-container和templateOutlet命令来开展应用。本文给大

Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法       ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 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 
export class AppComponent { }

 ngOutletContext 的使用

import { Component } from '@angular/core'; 
@Component({
 selector: 'app-root',
 template: `
 ng-template #stpl let-message="message" 
 p {{message}} /p 
 /ng-template 
 ng-template #atpl let-msg="message" 
 p {{msg}} /p 
 /ng-template 
 ng-template #otpl let-msg 
 p {{msg}} /p 
 /ng-template 
 div [ngTemplateOutlet]="atpl"
 [ngOutletContext]="context" 
 /div 
 div [ngTemplateOutlet]="stpl"
 [ngOutletContext]="context" 
 /div 
 div [ngTemplateOutlet]="otpl"
 [ngOutletContext]="context" /div 
export class AppComponent {
 context = { message: 'Hello ngOutletContext!', 
 $implicit: 'Hello, Semlinker!' };
}

总结

以上所述是小编给大家介绍的Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


  • 大学本科互联网安全性《

    原题目:大学本科互联网安全性《 Web网络服务器渗入实战演练技术性》 “” 这书从互联网安全性管理体系基本建设的视角,对怎样渗入Web网络服务器的技术性开展了科学研究小结及梳

  • H5分析

    独立顾客体会时,作为用劲磁磁感应,摇晃手机上上播发视頻的详尽版。碰触显示信息屏时状况会由原本白与黑变为五彩缤纷。视频播放整个过程点一下时的色彩变换是由编号进行。[标

  • 凡科抠图 修复人物脸部局

    Photoshop 修补角色面部部分暴光过多位置 公布 创作者:佚名 我想评价创作者:Jia_xiang 最后实际效果 1、先剖析下原照,翠绿色箭头符号所显示一部分有点儿暴光衔接。 2、把情况

  • 亿速云教你怎样挑选云空

    模拟题目:亿速云教你如何选择云储存空间数据信息信息内容库 让云服务器器器高些效 尽管全球肺部感染肺炎疫情依然模糊不清不明朗,但是我国肺部感染肺炎疫情预防形势持续平稳发

  • 成都市杰出游戏玩家 揭密

    笔忝 “中国香港这一拍,全国性都会看。”2016中国香港春拍的几场重磅消息专属让人入胜,就连过去其实不是最火门的高古玉、高古瓷2020年也走红销售市场。 4月五日,公然人到中国