首頁  >  文章  >  web前端  >  淺談Angular中插槽的用法

淺談Angular中插槽的用法

青灯夜游
青灯夜游轉載
2021-03-17 09:54:312598瀏覽

本篇文章跟大家介紹一下Angular插槽的使用。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

淺談Angular中插槽的用法

<span style="font-size: 18px;">Angular</span>#插槽的使用

使用ng-content 主要藉助於select

  • 如果什麼都不填直接使用< ng-content></ng-content>,會顯示父元件傳遞的預設的內容

  • ##使用的是類別名稱選擇器

  • 使用的是屬性選擇器

#相關推薦:《

angular教學

子元件

child

<div>
    <ng-content></ng-content>
    <ng-content select=&#39;.child&#39;></ng-content>
    <ng-content select=&#39;[name=child]&#39;></ng-content>
</div>
父元件

<app-child>
    <p>默认插槽</p>
    <p class=&#39;child&#39;>类名选择插槽</p>
    <p name=&#39;child&#39;>属性选择插槽</p>
</app-child>
更多程式相關知識,請造訪:

程式設計影片! !

以上是淺談Angular中插槽的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除