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

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

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了銅官免費建站歡迎大家使用！

一、 ng-content 進行內(nèi)容投影

1.1 ng-content

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

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

1.2 為什么使用內(nèi)容投影

定義一個 button 組件：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    
`
})
export class AppButtonComponent {}

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

click

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

1.3 單插槽內(nèi)容投影

內(nèi)容投影的最基本形式是單插槽內(nèi)容投影。

單插槽內(nèi)容投影是指創(chuàng)建一個組件，我們可以在其中投影一個組件。

以 button 組件為例，創(chuàng)建一個單槽內(nèi)容投影：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
     
`
})
export class AppButtonComponent {}

實際使用如下：

click

可以發(fā)現(xiàn)，現(xiàn)在這個 button 組件的效果是即顯示了搜索圖標，又顯示了按鈕的文本（click）。即把 中間的內(nèi)容 投影 到了組件的 位置。

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

1.4 多插槽內(nèi)容投影

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

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

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

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

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

以 button 組件為例，創(chuàng)建一個多槽內(nèi)容投影：

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
       
`
})
export class AppButtonComponent {}

實際使用如下：

click
 me here

1.5 ngProjectAs

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

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

@Component({
    selector: 'app-card',
    template: `