angular中怎么進行內容投影

這篇文章主要介紹“angular中怎么進行內容投影”，在日常操作中，相信很多人在angular中怎么進行內容投影問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”angular中怎么進行內容投影”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、 ng-content 進行內容投影

1.1 ng-content

ng-content 元素是一個用來插入外部或者動態內容的占位符。父組件將外部內容傳遞給子組件，當 Angular 解析模板時，就會在子組件模板中 ng-content 出現的地方插入外部內容。

我們可以使用內容投影來創建可重用的組件。這些組件有相似的邏輯和布局，并且可以在許多地方使用。一般我們在封裝一些公共組件的時候經常會用到。

1.2 為什么使用內容投影

定義一個 button 組件：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span>
`
})
export class AppButtonComponent {}

這個 button 組件的目的是在按鈕內部加一個搜索的圖標，我們實際使用如下：

<button appButton>click</button>

我們發現組件只會展示搜索圖標， 按鈕的文本不會展示，能你會想到最常使用的 @Input 裝飾器，但是如果我們不只是想傳文本進來，而是傳一段 html 進來呢？此時就會用到 ng-content。

1.3 單插槽內容投影

內容投影的最基本形式是單插槽內容投影。

單插槽內容投影是指創建一個組件，我們可以在其中投影一個組件。

以 button 組件為例，創建一個單槽內容投影：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content></ng-content>
`
})
export class AppButtonComponent {}

實際使用如下：

<button appButton>click</button>

可以發現，現在這個 button 組件的效果是即顯示了搜索圖標，又顯示了按鈕的文本（click）。即把 <button appButton></button> 中間的內容 投影 到了組件的 <ng-content></ng-content> 位置。

ng-content 元素是一個占位符，它不會創建真正的 DOM 元素。ng-content 的那些自定義屬性將被忽略。

1.4 多插槽內容投影

一個組件可以具有多個插槽，每個插槽可以指定一個 CSS 選擇器，該選擇器會決定將哪些內容放入該插槽。該模式稱為多插槽內容投影。使用此模式，我們必須指定希望投影內容出現在的位置。可以通過使用 ng-content 的 select 屬性來完成此任務。

• 組件模板含有多個 ng-content 標簽。

• 為了區分投影的內容可以投影到對應 ng-content 標簽，需要使用 ng-content 標簽上的 select 屬性作為識別。

• select 屬性支持標簽名、屬性、CSS 類和 :not 偽類的任意組合。

• 不添加 select 屬性的 ng-content 標簽將作為默認插槽。所有未匹配的投影內容都會投影在該 ng-content 的位置。

以 button 組件為例，創建一個多槽內容投影：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content select="[shuxing]"></ng-content> <ng-content select="p"></ng-content> <ng-content select=".lei"></ng-content>
`
})
export class AppButtonComponent {}

實際使用如下：

<button appButton>
<p>click</p> <span shuxing>me</span> <span class="lei">here</span>
</button>

1.5 ngProjectAs

在某些情況下，我們需要使用 ng-container 把一些內容包裹起來傳遞到組件中。大多數情況是因為我們需要使用結構型指令像 ngIf 或者 ngSwitch 等。。

在下面的例子中，我們將 header 包裹在了 ng-container 中。

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		    <ng-content select="header"></ng-content>
		  </div>
		  <div class="content">
		    <ng-content select="content"></ng-content>
		  </div>
		  <div class="footer">
		    <ng-content select="footer"></ng-content>
		  </div>
		  <ng-content></ng-content>
		</div>
`
})
export class AppCardComponent {}

使用：

<app-card>
  <ng-container>
    <header>
      <h2>Angular</h2>
    </header>
  </ng-container>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

由于 ng-container 的存在，header 部分并沒有被渲染到我們想要渲染的插槽中，而是渲染到了沒有提供任何 selector 的 ng-content 中。
在這種情況下，我們可以使用 ngProjectAs 屬性。
在上面的 ng-container 加上這個屬性，就可以按照我們的期望來渲染了。

<app-card>
  <ng-container ngProjectAs='header'>
    <header>
      <h2>Angular</h2>
    </header>
  </ng-container>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

二、 有條件的內容投影

如果你的元件需要有條件地渲染內容或多次渲染內容，則應配置該元件以接受一個 ng-template 元素，其中包含要有條件渲染的內容。

在這種情況下，不建議使用 ng-content 元素，因為只要元件的使用者提供了內容，即使該元件從未定義 ng-content 元素或該 ng-content 元素位于 ngIf 語句的內部，該內容也總會被初始化。

使用 ng-template 元素，你可以讓元件根據你想要的任何條件顯式渲染內容，并可以進行多次渲染。在顯式渲染 ng-template 元素之前，Angular 不會初始化該元素的內容。

2.1 ng-container

既不是一個組件，也不是一個指令，僅僅是一個特殊的tag而已。 使用 ng-container 渲染所包含的模板內容，不包含自身。

• angular代碼片段

<div>
  <ng-container>
    <p>My name is wyl.</p>
    <p>What is you name?</p>
  </ng-container>
</div>

• 瀏覽器調試窗口，可以發現 <ng-container> 標簽消失了，并沒有起任何作用

<div>
  <p>My name is wyl.</p>
  <p>What is you name?</p>
</div>

• 使用場景，如下，在我們需要遍歷或 if 判斷 時，它可以承擔一個載體的作用

<ul>
  <ng-container *ngFor="let item of items">
    <li>{{ item .name}}</li>
    <li>{{ item .age}}</li>
    <li>{{ item .sex}}</li>
  </ng-container>
</ul>

另外，ng 中常見錯誤之一的 for 和 if 不能寫在同一標簽上（在一個宿主元素上只能應用一個結構型指令），利用 ng-container 標簽可以在實現功能的基礎上減少層級的嵌套。

2.2 ng-template

先來看下面一段代碼

<ng-template>
    <p> In template, no attributes. </p>
</ng-template>

<ng-container>
    <p> In ng-container, no attributes. </p>
</ng-container>

瀏覽器輸出結果是：

In ng-container, no attributes.

即 <ng-template> 中的內容不會顯示。當在上面的模板中添加 ngIf 指令：

<ng-template [ngIf]="true">
   <p> ngIf with a ng-template.</p>
</ng-template>

<ng-container *ngIf="true">
   <p> ngIf with an ng-container.</p>
</ng-container>

瀏覽器輸出結果是：

ngIf with a ng-template.
ngIf with an ng-container.

2.3 ng-template 和 <ng-container> 的配合使用

<ng-container *ngIf="showSearchBread; else tplSearchEmpty">
     暫時搜索不到您要的數據喔
</ng-container>
<ng-template #tplSearchEmpty>
     快快開始獲取吧！
</ng-template>

2.4 ngTemplateOutlet

插入 ng-template 創建的內嵌視圖。 ngTemplateOutlet 是一個結構型指令，接收一個 TemplateRef 類型的值；

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

*ngTemplateOutlet = "templateRefExp; content: contentExp "

• templateRefExp: ng-template 元素的 #ID

• contextExp:

• 可空參數

• content 是一個對象，這個對象可以包含一個 $implicit 的 key 作為默認值， 使用時在 模板 中用 let-key 語句進行綁定

• content 的非默認字段需要使用 let-templateKey=contentKey 語句進行綁定

使用如下：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
  myContext = {$implicit: 'World', localSk: 'Svet'};
}

2.5 利用 ngTemplateOutlet 進行內容投影

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		  	<ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, index: otherDate }"></ng-container>
		  </div>
		</div>
`
})
export class AppCardComponent {

	@ContentChild('header', { static: true }) headerTemplate: TemplateRef<any>;

	public title = 'Test';
	public otherDate = {
	 	auth: 'me',
	 	name: 'appCard'
	};
}

使用

<app-card>
  <ng-template #header let-label let-item="otherDate">
    <h2>Angular</h2> {{label}} (Test) and  {{otherDate | json}} ({auth: 'me', name: 'appCard'})
  </ng-template>
</app-card>

到此，關于“angular中怎么進行內容投影”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！