각도 2는 구성 요소 html을 구성 요소 상속 템플릿에 포함합니다.

Question

구성 요소 A가 html/ts 파일과 함께 있습니다. A에서 두 번째 구성 요소 B를 상속 받으면 첫 번째 구성 요소에서 모든 속성과 메서드를 가져옵니다. 구성 요소 A html을 사용하려면 templateUrl 속성에서 comp A html을 참조 할 수 있습니다.

문제가 있습니다. 구성 요소 A html을 사용하고 싶지만 확장하고 싶습니다. 그래서 내 생각은 첫 번째 구성 요소 html을 두 번째로 "포함"합니다. Angular2에서 가능합니까? 다른 방법이 있습니까?

구성 요소 B에서 구성 요소 A의 인스턴스를 만들고 싶지 않습니다. html 마크 업만 원합니다.

편집 : 나는 hello2의 HTML에서 안녕하세요 구성 요소의 인스턴스를 만드는 경우

https://stackblitz.com/edit/ng-content-projection-lzjwea

나는 Hello2 시액을 상속, 그것을 가지고 내 문제가이 예에서

있다 그 name 속성.

1. 를 변경한다을 만들지 않고 첫 번째 구성 요소의 HTML을 참조하는 방법을 찾아 입력에 대한 모든 상속 구성 요소에 사용하고
2. 중복 HTML 코드
3. 를 주입 할 필요가 모든 속성 : 나는 세 가지 솔루션을 발견 그것의 인스턴스.

가장 좋은 해결책은 세 번째라고 생각합니다. 그러나 나는 그것을 할 방법을 모른다. ..

Answer 1

ng-content는 구성 요소의 동적 인 내용을 투사하기 위해 사용될 수있다.

예를 들어,

<div id='border'> 
    <h1>Base Component</h1> 
    <p>ng-content could be used for projecting dynamic content within a component</p> 
    <ng-content> 
     <!-- Dynamic content goes here --> 
    </ng-content> 
</div> 

그래서, 지금은

<hello> 
    <!-- dynamic html here --> 
</hello> 

app.component.html 사이에서 무엇이든 다음

hello.component.html을 고려

<hello> 
    <div style="border: 2px solid red"> 
    <h2>Child Component</h2> 
    <button id="sample1"> Sample 1 </button> 
    <button id="sample2"> Sample 2 </button> 
    </div> 
</hello> 

Example

희망이`NG-content` 블록 (콘텐츠 프로젝션은) 당신을 위해