ng content 中隱藏的內容

前端修仙之路

如果你嘗試在 angular 中編寫可重複使用的元件，則可能會接觸到內容投射的概念。然後你發現了，並找到了一些關於它的文章，進而實現了所需的功能。

接下來我們來通過乙個簡單的示例，一步步介紹所涉及的內容。

import  from '@angular/core';
let instances = 0;
@component()
class counter 
}

import  from '@angular/core';
@component()

現在我們來驗證一下效果：

有時你希望將包裝器的不同子項投影到模板的不同部分。為了處理這個問題，支援乙個select屬性，可以讓你在特定的地方投射具體的內容。該屬性支援 css 選擇器（my-element，.my-class，[my-attribute]，...）來匹配你想要的內容。如果 ng-content 上沒有設定select屬性，它將接收全部內容，或接收不匹配任何其他ng-content元素的內容。長話短說：

import  from '@angular/core';
@component(
.blue 
`]})

上面示例中，我們引入了select屬性，來選擇投射的內容：

上述**成功執行後，counter元件被正確投影到第二個藍色框中，而 span 元素最終會在全部紅色框中。請注意，目標ng-content會優先於 catch-all，即使它在模板中的位置靠後。

有時你的內部元件會被隱藏在另乙個更大的元件中。有時你只需要將其包裝在額外的容器中即可應用ngif或ngswitch。無論什麼原因，通常情況下，你的內部元件不是包裝器的直接子節點。為了演示上述情況，我們將 counter 元件包裝在乙個中，看看我們的目標投影會發生什麼：

現在我們的 couter 元件會被投影到第乙個紅色框中。因為ng-container容器不再匹配select="counter"。為了解決這個問題，我們必須使用ngprojectas屬性，它可以應用於任何元素上。具體如下：

通過設定ngprojectas屬性，終於讓我們的 counter 元件重回藍色框的懷抱了。

我們從乙個簡單的實驗開始：將兩個塊放在我們的模板中，沒有選擇器。會出現什麼情況？

頁面中會顯示乙個或兩個框，如果我們包含兩個框，它們的內容是顯示 1 和 1 或 1 和 2？

答案是我們在最後乙個中得到乙個計數器，另乙個是空的！在我們嘗試解釋為什麼之前，讓我們再來驗證乙個問題，即在ng-content指令的外層容器中新增ngif指令：

import  from '@angular/core';
@component(}
`})show = true;
}

乍一看，似乎正常執行。但是如果你通過按鈕進行切換操作，你會注意到計數器的值不會增加。這意味著我們的計數器元件只被例項化了一次 - 從未被銷毀和重新建立。難道這是ngif指令產生的問題，讓我們測試一下ngfor指令，看看是否有同樣的問題：

import  from '@angular/core';
@component()
items = [0, 0, 0];
}

以上**執行後與我們使用多個的效果是一樣的，只會顯示乙個計數器！為什麼不按照我們的預期執行？

這種行為有兩個原因：期望一致性和效能。什麼 "期望的一致性" 意味著作為開發人員，可以基於應用程式的**，猜測其行為。假設我寫了以下**：

很顯然計數器將被例項化一次，但現在假如我們使用第三方庫的元件：

如果第三方庫能夠控制 counter 元件的生命週期，我將無法知道它被例項化了多少次。其中唯一方法就是檢視第三方庫的**，了解它們的內部處理邏輯。將元件的生命週期被繫結到我們的應用程式元件而不是包裝器的意義是，開發者可以掌控計數器只被例項化一次，而不用了解第三方庫的內部**。

效能的原因更為重要。因為ng-content只是移動元素，所以可以在編譯時完成，而不是在執行時，這大大減少了實際應用程式的工作量。

為了讓包裝器能夠控制其子元素的例項化，我們可以通過兩種方式完成：在我們的內容周圍使用元素，或者使用帶有 "*" 語法的結構指令。為簡單起見，我們將在示例中使用語法，我們的新應用程式如下所示：

包裝器不再使用，因為它接收到乙個模板。我們需要使用@contentchild訪問模板，並使用ngtemplateoutlet來顯示它：

@component(}
`})show = true;
@contentchild(templateref) template: templateref;
}

現在我們的 counter 元件，每當我們隱藏並重新顯示時都正確遞增！讓我們再驗證一下*ngfor指令：

@component()
items = [0, 0, 0];
@contentchild(templateref) template: templateref;
}

上面**成功執行後，每個盒子中有乙個計數器，顯示 1，2 和 3，這正是我們之前預期的結果。

ng content 中隱藏的內容

ng2中的ng content用法

Dom豐富內容顯示隱藏內容

div內容換行（隱藏）

ng content 中隱藏的內容

ng2中的ng content用法

Dom豐富內容顯示隱藏內容

div內容換行（隱藏）

相關推薦