Angular的元件投影

2021-10-10 04:45:43 字數 833 閱讀 3026

自己建立的元件,在頁面引用的時候元件標籤裡面填寫的內容是不生效的,因為元件不具備投影功能,但是我們可以在元件裡面新增ng-content標籤,ng-content 相當於乙個插槽,我們在元件標籤裡面設定的資料會顯示在ng-content裡面,也可以設定多個ng-content,然後設定select屬性選擇對應的內容。

元件 html**

元件投影<

/h3>

showdown<

/p>

="bg-primary"

>

//選擇class為head的內容

".head"

>

<

/ng-content>

<

/div>

="bg-warning"

>

//選擇class為content的內容

".content"

>

<

/ng-content>

<

/div>

="bg-success"

>

//選擇class為foot的內容

".foot"

>

<

/ng-content>

<

/div>

<

/div>

引用元件

="head"

>這是頭部<

/div>

="content"

>這是預設內容<

/div>

="foot bg-success"

>這是尾部<

/div>

<

Angular元件 投影

執行時動態改變元件模版的內容。沒路由那麼複雜,只是一段html,沒有業務邏輯。ngcontent指令將父元件模版上的任意片段投影到子元件上。1 子元件中使用指令來標記投影點 div class h2 我是子元件 h2 div 這個div定義在子元件中 div ng content ng conten...

Angular元件封裝

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

angular 元件互動

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