각도 2 : 다른 하위 구성 요소와 동일한 상위 구성 요소를 사용할 수 있습니까?

Question

사용할 하위 구성 요소를 지정하지 않고 상위 구성 요소를 정의 할 수 있는지 알고 싶습니다.

일반적으로 내가 부모 구성 요소를 생성하고 HTML 파일의 하위 구성 요소의 선택을 사용

부모 구성 요소 1.html :

//some logic 
<child-component-1-selector></child-component-1-selector> 
//some logic 

난에있는이 방법을 따르는 경우 어떤 종류의 하위 구성 요소를 사용할지 정의하십시오. 내가 다른 하위 구성 요소와 상위 구성 요소를 여러 번 사용하고 싶어하지만, 내가 별도의 부모 구성 요소를 논리 부분을 복사하여 만들 수 있습니다

부모 구성 요소 1.html :

//some logic 
<child-component-1-selector></child-component-1-selector> 
//some logic 

학부모 구성 요소 2.html : 나는이 코드 중복을 생성하기 때문에

//some logic (same as above) 
<child-component-2-selector></child-component-2-selector> 
//some logic (same as above) 

나는 접근 방식을 좋아하지 않는다. 어떤 하위 구성 요소를 렌더링할지 지정하지 않고 하위 구성 요소를 인수로 전달하지 않고 상위 구성 요소를 정의하는 방법이 있습니까?

현재의 접근 방식, 그랜드 - 부모 - component.html :

는 방법, 그랜드 - 부모 - component.html 제안했다

<parent-component-1></parent-component-1> 
<parent-component-2></parent-component-2> 

:

<parent-component-selector [childcomponent] = "child-component-1"></parent-component-selector> 
<parent-component-selector [childcomponent] = "child-component-2"></parent-component-selector> 

나는 희망 나는 내 자신이 분명히있다 내 '문제'에 대해.

<my-custom-panel> 
    <some-other-component> 
</my-custom-panel> 

하면, 다른 장소에서 다음

<my-custom-panel> 
    <here-is-one-inner-component> 
</my-custom-panel> 

그리고 : 어쩌면 너희들이 나를 도와 최고의 당신이 그런 짓을 할 수 있도록하려는 것 소리

Answer 1

을 실천에 대한 제안을 제공 할 수 있습니다 나는 너를 올바르게 읽는다. 그러면 Angular의 내용 투영법을 기본적으로 사용하고있다.

그래서, 내 위의 예에서, I는 다음과 같이 내 맞춤형 패널을 구성 요소를 써서 :

@Component({ 
    selector: 'my-custom-panel', 
    template: ` 
    <div class="wrapper"> 
     <h1>My Heading</h1> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class .... 

트릭은 그 구성 요소의 템플릿 마커 역할을 <ng-content> 태그. 다른 템플릿에서 내 맞춤 패널을 사용하는 경우 my-custom-panel 태그 내에 나타나는 콘텐츠는 해당 <ng-content> 태그 바로 옆에 투영됩니다.

예를 들어보다 명확하게 알 수 있습니다. 그래서, 템플릿 내-사용자 정의 패널을 사용하여 내 첫 번째 예제의 경우에 :

<my-custom-panel> 
    <here-is-one-inner-component> 
</my-custom-panel> 

로 변환 얻을 것이다

:

<div class="wrapper"> 
     <h1>My Heading</h1> 
     <ng-content></ng-content> 
     <here-is-one-inner-component> 
</div> 

은 당신이 찾고있는 무엇인가요?