>  기사  >  웹 프론트엔드  >  Angular의 슬롯 사용법에 대한 간략한 토론

Angular의 슬롯 사용법에 대한 간략한 토론

青灯夜游
青灯夜游앞으로
2021-03-17 09:54:312701검색

이 글에서는 Angular 슬롯 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 슬롯 사용법에 대한 간략한 토론

<span style="font-size: 18px;">각도</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

주로 select의 도움으로 ng-content를 사용하세요.

  • 아무 것도 입력하지 않고 <ng-content></ng-content>를 사용하면 상위 구성 요소가 전달한 기본 콘텐츠가 표시됩니다

  • <ng-content select='.child'></ng-content>는 클래스 이름 선택기를 사용합니다
  • 🎜< ng-content select='[name=child]'></ng-content>는 속성 선택기를 사용합니다🎜
🎜관련 권장 사항: "angular tutorial🎜》🎜🎜하위 구성 요소 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으로 문의하시기 바랍니다. 삭제