Angular元件 投影

2022-01-24 11:24:53 字數 2043 閱讀 2598

執行時動態改變元件模版的內容。沒路由那麼複雜，只是一段html，沒有業務邏輯。

ngcontent指令將父元件模版上的任意片段投影到子元件上。

1、子元件中使用指令來標記投影點

<


div 


class


>


<


h2>我是子元件


h2>


<


div>這個div定義在子元件中


div>


<


ng-content


>


ng-content


>


div>
2、父元件中把要投影到子元件的投影點的html片段寫到子元件的標籤中

<


div 


class


>


<


h2>我是父元件


h2>


<


div>這個div定義在父元件中


div>


<


>


<


div>這個div是父元件投影到子元件中


div>


>


div>
效果：

子元件加樣式：

}父元件加樣式：

子元件：

<


div 


class


>


<


h2>我是子元件


h2>


<


ng-content 


selecter


=".header"


>


ng-content


>


<


div>這個div定義在子元件中


div>


<


ng-content 


selecter


=".footer"


>


ng-content


>


div>
父元件：

<


div 


class


>


<


h2>我是父元件


h2>


<


div>這個div定義在父元件中


div>


<


>


<


div 


class


="header"


>這是頁頭，這個div是父元件投影到子元件中,title是}


div>


<


div 


class


="footer"


>這是頁尾，這個div是父元件投影到子元件中


頁頭和頁尾被投影到子元件中，同時title也被投影過去。


父元件模版中投影內容中插值表示式只能繫結父元件中的屬性，雖然內容會被投影到子元件中去。


在父元件模版中加一行：


<


div 


[innerhtml]


="divcontent"


>


div>


父元件中加乙個divcontent屬性，內容就是一段html片段。


divcontent="<


div>屬性繫結綁innerhtml


div>";


效果


[innerhtml]是瀏覽器特定的api。


ngcontent指令平台無關。可繫結多個投影點。


優先考慮ngcontent指令。
				
Angular的元件投影
自己建立的元件，在頁面引用的時候元件標籤裡面填寫的內容是不生效的，因為元件不具備投影功能，但是我們可以在元件裡面新增ng content標籤，ng content 相當於乙個插槽，我們在元件標籤裡面設定的資料會顯示在ng content裡面，也可以設定多個ng content，然後設定select屬...

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

				
angular  元件互動
angular是以元件化的形式來實現，因而元件互動是極為基礎且重要的，下面對其元件之間的互動方式一一介紹。1.通過輸入型繫結把資料從父元件傳到子元件。3.父元件監聽子元件的事件 4.父元件與子元件通過本地變數互動 注 用本地變數可使用在父元件模板裡面來讀取子元件的屬性或者使用其方法 5.父元件呼叫 ...