Angular模板中ng-template和ng-container指令的用法-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

Angular模板中ng-template和ng-container指令的用法

這篇文章主要講解了“Angular模板中ng-template和ng-container指令的用法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular模板中ng-template和ng-container指令的用法”吧！

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、山南ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的山南網(wǎng)站制作公司

ng-template指令簡(jiǎn)介

ng-template是一個(gè) Angular 結(jié)構(gòu)型指令，用來渲染 HTML。它永遠(yuǎn)不會(huì)直接顯示出來。事實(shí)上，在渲染視圖之前，Angular 會(huì)把 ng-template 及其內(nèi)容替換為一個(gè)注釋。

如果沒有使用結(jié)構(gòu)型指令，而僅僅把一些別的元素包裝進(jìn) ng-template 中，那些元素就是不可見的。

像*ngFor、 *ngIf這些指令A(yù)ngular內(nèi)部會(huì)把這些屬性翻譯成一個(gè) 元素并用它來包裹宿主元素。

ng-container指令簡(jiǎn)介

為了避免創(chuàng)建額外的div，我們可以改用ng-container，它是一個(gè)分組元素，但它不會(huì)污染樣式或元素布局，因?yàn)?Angular 壓根不會(huì)把它放進(jìn) DOM 中。ng-container 是一個(gè)由 Angular 解析器負(fù)責(zé)識(shí)別處理的語法元素。它不是一個(gè)指令、組件、類或接口，更像是 JavaScript 中 if 塊中的花括號(hào)。

ng-container用法

用法一（最基礎(chǔ)的用法）

我們?cè)谝粋€(gè)列表循環(huán)里有寫時(shí)候有一些判斷要完成，我們知道angular的結(jié)構(gòu)指令是不允許兩個(gè)同時(shí)存在的，這個(gè)時(shí)候如果我們又不想增加多余的div就可以用ng-container


    
        {{item.context}}

用法二（結(jié)合ngSwitch一起使用）


    標(biāo)題
    內(nèi)容
    其他

當(dāng)然ngSwitch也可以直接寫在html標(biāo)簽上。

用法三（結(jié)合ng-template使用）

可以跟template配合使用，將重復(fù)的模塊內(nèi)容抽取出來，也可傳參給要顯示的模板。比如下面的這個(gè)例子，甲方有甲方姓名和介紹，乙方也同樣有這些介紹，我們就可以把共同介紹整合出來。

乙方：

乙方姓名

合同介紹......

ngTemplateOutlet是定義模板引用和模板的上下文(即ng-template)對(duì)象的字符串，這樣如果有多個(gè)模板引用可以用這種方式 ngTemplateOutletContext是附加到的上下文(即ng-template)對(duì)象EmbeddedViewRef。這應(yīng)該是一個(gè)對(duì)象，該對(duì)象的鍵可用于本地模板let 聲明的綁定。$implicit在上下文(即ng-template)對(duì)象中使用鍵會(huì)將其值設(shè)置為默認(rèn)值。 ngTemplateOutlet也可用于外部傳進(jìn)來的模板

child.component.html

child.component.ts

@Input() tplRef: TemplateRef

ng-template用法

用法一

結(jié)合*ngIf使用，這樣可以不用加兩次不同判斷條件，可以在html里直接使用if else語句

{{text}}

暫無數(shù)據(jù)

用法二

頁面里使用antd的modalService創(chuàng)建對(duì)話框時(shí)，可以模板寫在html里面，通過引用加載過來放到modal的nzContent里（說的有點(diǎn)亂了，看代碼吧）

xxxxxxx

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild('content') contentTpl: TemplateRef;
    ngOnInit() {
        this.modalService.create({
            nzTitle: '標(biāo)題',
            nzContent: this.contentTpl
        })
    }
}

用法三

以模板的形式，作為一個(gè)輸入變量傳給組件，這樣我們就可以在用這個(gè)組件時(shí)寫成自己想要的內(nèi)容比如我們寫個(gè)共用的暫無數(shù)據(jù)的組件，一般只用傳text文字就可以有些特殊的時(shí)候我們可能需要一些新增按鈕。

empty.component.html


    
    
        
            
        
        {{text || ''}}

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

總結(jié)，都是一些最基礎(chǔ)的用法，現(xiàn)在所了解的就這些用法，如果有知道更多的歡迎大家補(bǔ)充。

感謝各位的閱讀，以上就是“Angular模板中ng-template和ng-container指令的用法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular模板中ng-template和ng-container指令的用法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁名稱：Angular模板中ng-template和ng-container指令的用法
轉(zhuǎn)載來源：http://www.ef60e0e.cn/article/ieoeei.html

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

ng-template指令簡(jiǎn)介

ng-container指令簡(jiǎn)介

ng-container用法

ng-template用法

其他資訊