Angular2 : 기본 구성 요소 - 제목과 내용이있는 패널

Question

기본 패널을 나타내는 구성 요소 (HTML 템플릿 포함)를 만들고 싶습니다. 그런 다음이 기본 클래스를 상속하지만 제목 (클래스 특성/함수 또는 @Input)과 내용 (template 또는 templateUrl은 @Component 데코레이터로 지정) 만 지정하고 싶습니다.

@Component({ 
    template: ` 
     <div class="panel"> 
      <div class="title">{{title}}</idv> 
      <div class="content">???</div> 
     </idv> 
    ` 
}) 
export class BasePanel { 
    @Input() 
    protected title: string = ''; 
} 

@Component({ 
    selector: 'my-panel', 
    template: `MyPanel template - lorem ipsum` 
}) 
export class MyPanel extends BasePanel { 
    title: string = 'MyPanel title'; 
} 

다음 다른 템플릿 :

<my-panel></my-panel> 

또는

는

<my-panel title="My better panel"></my-panel> 

매우 좋은 솔루션은 HTML 태그 사이에 콘텐츠를 제공하는 것입니다 :

<my-panel title="My panel with content"> 
    <p>Lorem ipsum dolor sit amet,</p> 
    <p>consectetur adipiscing elit.</p> 
</my-panel> 

편집 1

ng-content가 포함 된 @rinukkus의 용액이 효과적입니다.

하지만 파생 된 구성 요소 템플릿을 장식하는 BasePanel 구성 요소를 만들 수있는 가능성이 있습니다.

Answer 1

각도는 확장 구성 요소를 지원하지 않습니다. In Angular composition은 상속보다 선호됩니다. 사용자 지정 데코레이터를 지원하는 제안이 있지만 곧 오프라인 템플릿 컴파일러와 호환되지 않는 대답이 있습니다.

Answer 2

상속은 작동하지 않지만 ng-content 태그를 활용하면 원본 HTML을 표시 할 수 있습니다.

구성 요소 :

@Component({ 
    selector: 'my-panel', 
    template: ` 
     <div class="panel"> 
      <div class="title">{{title}}</div> 
      <div class="content"><ng-content></ng-content></div> 
     </div> 
    ` 
}) 
export class MyPanel { 
    @Input() 
    protected title: string = ''; 
} 

사용법 :

<my-panel title="My panel with content"> 
    <p>Lorem ipsum dolor sit amet,</p> 
    <p>consectetur adipiscing elit.</p> 
</my-panel> 

---

작업 Plunker 사용 예제