구성 요소에 placholder 만들기

각도 4에서는 사용자가 내부에 사용자 지정 콘텐츠를 정의 할 수있는 구성 요소를 구현해야한다고 가정합니다.구성 요소에 placholder 만들기

예 :

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
})

및 해당 구성 요소의 사용 목적은 그런 일이 될 것입니다 :

<main-navigation> 
    <router-outlet></router-outlet> <!-- <- this is some user content --> 
</main-navigation>

각도 4 등 자리를 만드는 가장 간단한 방법은 무엇입니까?

출처

2017-09-20 Alexander Abakumov

여기에 내부에 <ng-content></ng-content>을 붙이시겠습니까? 사용자가 <main-navigation> </main-navigation> 태그 사이에두고 어떤 다른

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <ng-content></ng-content> <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
})

이 가능성과 함께 <router-outlet></router-outlet>을 추가해야합니다. 그것이 당신이 원하는 행동인지 정확히 모르겠지만, 당신이 그것에 대해 더 명확히한다면, 나는 나의 대답을 다시 평가할 수 있을지도 모른다.

출처

2017-09-20 16:22:08 amal

고마워요. 트릭을 한 것처럼 보입니다. 그것은 단순한 것으로 밝혀졌습니다! 나는 공식 문서의 어딘가에 있었으면 좋겠다. [최상위 20 개 검색 결과] (https://www.google.com/search?q=%22ng-content%22&ei=M5fCWZCSHKHqjwST0rGgAw&start=0&sa=N&biw=)에있는 ''항목에는 문서에 대한 링크도 없습니다. 1451 & bih = 719). –

니스! 이 [one] (https://scotch.io/tutorials/angular-2-transclusion-using-ng-content)은 아이디어를 얻기에 좋고 간단한 읽을 거리입니다. 희망이 도움이됩니다. – amal

입니다! 당신의 대답 후에 나는 ''을 사용하여 명명 된 자리 표시자를 생성 할 수 있는지 여부를 알아 내고이 게시물의 답변을 찾았습니다. –

@amal 답변의 추가 개발.

당신이 자리를 이름을 갖고 싶어

이 가능한 방법 중 하나는 다음과 같습니다 : 다음

... 
<ng-content select="content"></ng-content> 
...

, 당신은 할 수 : this awesome post에

<main-navigation> 
    <content> 
     <router-outlet></router-outlet> 
    </content> 
</main-navigation>

크레딧.

출처

2017-09-20 17:11:48

구성 요소에 placholder 만들기

답변

관련 문제