"러시아 인형"구성 요소의 각도 순환 종속성

Question

제공되는 @Input EntityType 속성을 기반으로 특정 상세 구성 요소를 렌더링하는 일반 마스터 - 상세 구성 요소를 구축했습니다.

@Component({ 
    selector: 'master-detail', 
    template: ` 
    <div> 
     <grid></grid> 
     <detail-wrapper> [entityType]=entityType></detail-wrapper> 
    </div> 
    `, 
}) 
export class MasterDetailComponent { 
    @Input() entityType: string ; 
    ... 
} 

@Component({ 
    selector: 'detail-wrapper', 
    template: ` 
    <ng-container [ngSwitch]="entityType"> 
     <comp-a *ngSwitchCase="'A'"></comp-a> 
     <comp-b *ngSwitchCase="'B'""></comp-b> 
     <comp-default *ngSwitchDefault></comp-default> 
    </ng-container> 
    `, 
}) 
export class DetailWrapperComponent { 
    @Input() entityType: string ; 
    ... 
} 

상세 구성 요소 자체가 (러시아 인형 같은) 다른 마스터 - 상세 구성 요소를 포함 할 수 있습니다 마스터 상세 구성 요소 템플릿, 우리는 entityType에 따라 적절한 세부 구성 요소를 렌더링하는 래퍼/공장 구성 요소를 호출합니다. 이러한 상황이 발생하지만 때, 내 코드 때문에 순환 종속성으로 실행되지 않습니다 :

master-detail -> detail-wrapper -> compA -> master-detail 

을 내가 상속을 사용하여 각 수준에 대한 중복을 만들어이를 순환 종속성을 깰 수 알고

export class MasterDetailLevel2Component extends MasterDetailComponent {...} 
export class CompALevel2Component extends CompAComponent {...} 

을하지만 실제로 적절한 해결책으로 보이지 않으며 각 재귀 수준에 대한 클래스를 만드는 작업이 포함됩니다.

또 다른 가능성은 DetailWrapperComponent 대신 ComponentFactoryResolver를 사용하는 것입니다. 그런 다음 MasterDetailComponent에 구성 요소 팩토리 인터페이스가 제공되므로 (따라서 구체적인 구현 간의 연결이 제거됩니다). 그러나이 솔루션을 사용하면 템플릿 바인딩이 느슨해집니다.

더 좋은 방법이 있나요?

Answer 1

가장 좋은 해결책은 내 마스터 - 세부 구성 요소에 @ContentChild를 사용하고 상위 구성 요소의 세부 템플릿을 주입하는 것입니다. 이 방법을 사용하면 순환 종속성을 제거하고 내 구성 요소를보다 유연하게 만들 수 있습니다. 다음은 매우 유용한 기사입니다.

https://blog.jonrshar.pe/2017/May/29/angular-ng-template-outlet.html