這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Angular中NgTemplateOutlet指令的理解和用法是什么，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司：從2013年創(chuàng)立為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為上千家公司企業(yè)提供了專(zhuān)業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 定制制作由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶(hù)的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺(jué)效果，策劃師分析客戶(hù)的同行競(jìng)爭(zhēng)對(duì)手，根據(jù)客戶(hù)的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶(hù)同行業(yè)具有領(lǐng)先地位的。

最近在看一個(gè)培訓(xùn)項(xiàng)目的時(shí)候有看到這個(gè)NgTemplateOutlet這個(gè)結(jié)構(gòu)性指令，但是我之前沒(méi)接觸過(guò)，不知道這東西是怎么用的，然后，我去官網(wǎng)上去搜了一下這個(gè)api（官網(wǎng)鏈接點(diǎn)這里）。

只是說(shuō)一下NgTemplateOutlet的用法和使用場(chǎng)景。

使用方法

這個(gè)api按照官網(wǎng)的說(shuō)法是這樣的：

根據(jù)一個(gè)提前備好的 TemplateRef 插入一個(gè)內(nèi)嵌視圖。

我給它翻譯一下：使NgTemplateOutlet的宿主元素變成一個(gè)內(nèi)嵌視圖——這個(gè)內(nèi)嵌視圖是根據(jù)一個(gè)提前定義好的templateRef模板引用生成的。而宿主元素?zé)o論是什么元素，都不會(huì)被渲染出來(lái)。

我們將官網(wǎng)的示例改一下（因?yàn)楣倬W(wǎng)的人命我看不懂）：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="one"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="two; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="three; context: myContext"></ng-container>
    <hr>

    <ng-template #one><span>Hello</span></ng-template>
    <ng-template #two let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #three let-person="lastName">My name is <span>LeBron {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: 'World', lastName: 'James'};
}

一個(gè)宿主元素可以使用ngTemplateOutlet這個(gè)結(jié)構(gòu)性指令，使自己變成任意的一個(gè)<ng-template>模板生成的內(nèi)嵌視圖。并且可以給其設(shè)置上下文對(duì)象。然后我們?cè)谶@個(gè)模板中可以使用let-變量這個(gè)模板輸入變量來(lái)獲取上下文對(duì)象中的值，這個(gè)模板更具靈活性。

應(yīng)用場(chǎng)景

類(lèi)似于ng-zorro這個(gè)框架的分頁(yè)組件Pagination（官網(wǎng)鏈接）。如果我們對(duì)默認(rèn)上一頁(yè)和下一頁(yè)的樣式或者結(jié)構(gòu)不滿(mǎn)意，想要自己調(diào)整的話(huà)，我們可以提供一個(gè)輸入屬性（@Input定義的屬性）,來(lái)接收一個(gè)模板，并且為其提供所必須的屬性或者方法。這樣的話(huà)，我們就可以在不修改組件源碼的情況下實(shí)現(xiàn)組件的復(fù)用。

Demo

我們先定義一個(gè)子組件HeroDisplayCard，角色的展示界面

@Component({
  selector:'app-hero-display-card',
  template:`
    <h3 [style]="{textAlign:'center'}">角色列表</h3>
    <ul class="hero-card-box">
      <li class="hero-card-item" *ngFor="let h of heroesList">
        <p [style]="{textAlign:'center'}">
          角色id：{{h.id}}--
          角色名字：{{h.name}}--
          角色屬性：{{h.features}}
        </p>
      </li>
    </ul>
  `,
  styles:[
    `.hero-card-box{
      width: 600px;
      margin: 10px auto;
    }
    .hero-card-item{
      list-style: none;
    }
    `
  ]
})
export class HeroDisplayCard {
  public heroesList = [
    {id:'013',name:'鐘離',features:'rock'},
    {id:'061',name:'煙緋',features:'fire'},
    {id:'022',name:'迪奧娜',features:'ice'},
    {id:'004',name:'諾艾爾',features:'rock'},
  ]
}

然后將這個(gè)組件引入一個(gè)父組件當(dāng)中：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card></app-hero-display-card>
  `
})
export class TemplateOutletAppDemoComponent {}

代碼運(yùn)行一下，效果如圖：

我覺(jué)得這個(gè)li的樣式實(shí)在是太丑了，而且順序也不太對(duì)。我希望把角色屬性調(diào)到角色名字之前。這樣的話(huà)，如果只是單純的通過(guò)輸入屬性來(lái)更改樣式的話(huà)就會(huì)變得很麻煩，我們可能需要定義非常多的變量來(lái)供使用者選擇，這樣的話(huà)有點(diǎn)得不償失。那么我們何不直接提供一個(gè)模板給使用者，我們只需要提供必要的數(shù)據(jù)就可以了。樣式，排版這些自由交給使用者。

那么對(duì)于子組件HeroDisplayCard我們可以這么改：

@Component({
  selector:'app-hero-display-card',
  template:`
    <h3 [style]="{textAlign:'center'}">角色列表</h3>
    <ul class="hero-card-box">
      <ng-container *ngFor="let h of heroesList">
        <!-- 如果沒(méi)有傳入cardItemTemplate則顯示默認(rèn) -->
        <li class="hero-card-item" *ngIf="!cardItemTemplate">
          <p [style]="{textAlign:'center'}">
            角色id：{{h.id}}--
            角色名字：{{h.name}}--
            角色屬性：{{h.features}}
          </p>
        </li>
        <!-- 如果傳入了自定義模板，則顯示出來(lái)，鑒于angular的結(jié)構(gòu)型指令不能在同一個(gè)宿主元素上的規(guī)定，于是這樣寫(xiě) -->
        <ng-container *ngIf="cardItemTemplate">
		  <!-- 將自定義模板的上下文對(duì)象設(shè)置為h -->
          <ng-container *ngTemplateOutlet="cardItemTemplate;context:h"></ng-container>
        </ng-container>
      </ng-container>
    </ul>
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef<any>;
  public heroesList = [ // 省略]
}

然后我們?cè)诟附M件中將自定義的模板傳入進(jìn)去：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card [cardItemTemplate]="myCardTemplate"></app-hero-display-card>
	<!-- 將模板引用變量myCardTemplate傳入子組件 -->
    <ng-template #myCardTemplate let-id="id" let-name="name" let-features="features">
      <li class="hero-card-custom-item">
        <p>角色id：<span>{{id}}</span></p>
        <p>角色屬性：<span>{{features}}</span></p>
        <p>角色名字：<span>{{name}}</span></p>
      </li>
    </ng-template>
  `,
  styles:[
    //在這里寫(xiě)自定義模板的樣式  
    `.hero-card-custom-item{
      width: 100%;
      height: 35px;
      border: 1px solid #999999;
      border-radius: 5px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin: 10px 0;
    }
    .hero-card-custom-item p {
      width: 30%;
      margin: 0;
      font-size: 20px;
      color: #666666;
    }
    .hero-card-custom-item p span {
      color: red;
    }`
  ]
})
export class TemplateOutletAppDemoComponent {}

然后運(yùn)行一下，效果如圖（其實(shí)還是很丑）：

總結(jié)

使用NgTemplateOutlet這個(gè)結(jié)構(gòu)性指令可以增強(qiáng)我們子組件的封裝程度，避免需要定義大量的輸入屬性，導(dǎo)致父組件的模板看起來(lái)臃腫不堪。

上述就是小編為大家分享的Angular中NgTemplateOutlet指令的理解和用法是什么了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱(chēng)：Angular中NgTemplateOutlet指令的理解和用法是什么
分享地址：http://aaarwkj.com/article8/peijip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、全網(wǎng)營(yíng)銷(xiāo)推廣、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)