Angular 元件內容嵌入ng content

2021-08-13 17:52:15 字數 1574 閱讀 8737

元件的內容嵌入:在元件中嵌入模板**,提高元件的可復用性。很好得擴充元件的功能,方便**的服用。典型的例子就是:模態對話方塊或導航欄的使用,通常模態對話方塊和導航欄的樣式是一樣的,這是如果有乙個模板,我們只負責往裡面填充資料,是不是就方便使用多了,元件內容嵌入就是解決此類問題的。下面舉例說明:

檔案目錄如下:

}設定模板

class="tbody">

class="header tborder">

select="header">

ng-content>

td>

tr>

class="body tborder">

select=".body">

ng-content>

td>

tr>

class="footer tborder">

select="[name=footer]">

ng-content>

td>

tr>

body>

table>

div>模板樣式

// example-content.component.css

.tbody

.tborder

.header

.body

.footer為模板新增內容

聯絡人header>

class="body">

李四:18766892869

div>

name="footer">

div>

example-content>

執行後得到如圖

如果別的程式想用這個樣式,只需改變一下內容:只需改動引用該模板樣式的模板,如

商店header>

class="body">

水果類div>

name="footer">

由霜****提供

div>

example-content>

執行結果如下

angular 的 ng 指令繫結方法

拿 ng click 說吧,剛開始接觸 angular 時,只知道這指令能觸發乙個繫結的函式,所以使用的時候也僅僅繫結了乙個函式,後來用著用著發現,可以繫結多個觸發函式 button ng click fnc1 fnc2 click me button 後來觀摩專案內資深大神寫的 後,發現連三目也能...

angular 學習筆記 2 ng指令

今天介紹一些常用的ng指令吧。一 ng bind和ng clock。ng bind 將data資料繫結到當前元素的 innerhtml,相當於初始化吧。ng clock 主要用來避免html模板顯示引起的不希望的閃爍效應,其實ng bind也有同樣的效果。解決閃爍問題還可以把引包放在head裡面,先...

Angular元件封裝

前言 在專案中我們常看到乙個頁面裡的 在很多頁面裡面用到,我們會把它封裝成乙個元件供多個頁面引用我們在頁面看到類似於下圖的標籤,就是引用的封裝好的元件 changepage event editbutton btnedit addopen addopen event,addmodal editdat...