Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über die Verwendung von Slots in Angular

Eine kurze Diskussion über die Verwendung von Slots in Angular

青灯夜游
青灯夜游nach vorne
2021-03-17 09:54:312598Durchsuche

Dieser Artikel stellt Ihnen die Verwendung von Angular-Slots vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über die Verwendung von Slots in Angular

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

使用ng-content 主要借助于select

  • 如果什么都不填直接使用<ng-content></ng-content>,就会显示父组件传递的默认的内容

  • <ng-content select=&#39;.child&#39;></ng-content>使用的是类名选择器

  • <ng-content select=&#39;[name=child]&#39;></ng-content>使用的是属性选择器

相关推荐:《angular教程

子组件 child

Verwenden Sie ng-content hauptsächlich mit Hilfe von select

  • Wenn Sie <ng-content></ng-content> verwenden, ohne etwas auszufüllen, wird der von der übergeordneten Komponente übergebene Standardinhalt angezeigt

  • <ng-content select='.child'></ng-content> verwendet den Klassennamenselektor
  • 🎜< ng-content select='[name=child]'></ng-content> verwendet den Attributselektor🎜
🎜Verwandte Empfehlungen: „Angular Tutorial🎜》🎜🎜Untergeordnete Komponente untergeordneter🎜
<div>
    <ng-content></ng-content>
    <ng-content select=&#39;.child&#39;></ng-content>
    <ng-content select=&#39;[name=child]&#39;></ng-content>
</div>
🎜übergeordnete Komponente 🎜
<app-child>
    <p>默认插槽</p>
    <p class=&#39;child&#39;>类名选择插槽</p>
    <p name=&#39;child&#39;>属性选择插槽</p>
</app-child>
🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verwendung von Slots in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen