angular 2 - 런타임 중에 구성 요소를 가져 오거나 삽입하는 방법

Question

제품에 대한 두 가지 뷰가 있으며 사용자 기본 설정을 기반으로 한 뷰 중 하나를 표시하려고한다고 가정 해 보겠습니다.

두 개의 다른 폴더에서 두 개의보기가 유지되고 사용자가 로그인 한 후 사용자가 제품을 보는 방법에 따라 폴더에서 가져 오려고합니다.

Folder 1 
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product> 
Folder 2 
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product> 
App 
----App.Component // here I would like to import the component at runtime from either folder 1/2 based on user preferences 

의견을 나누십시오. 구성 요소 수준 (예 : 라우팅 수준)에서이를 달성 할 수없는 경우 대안이 있습니까?

Answer 1

왜 사용자 환경 설정에 따라 스왑 될 두 요소에 * ngIf가 없습니까?

<my-product1 *ngIf="userPref1"></my-product1> 
<my-product2 *ngIf="!userPref1"></my-product2> 

여기서 userPref1은 사용자 입력에 의해 설정되는 App.Component에있는 변수 (또는 함수)입니다.

사용자는 자신의 선호도를 지정할 수 있으며 응용 프로그램은 입력에 따라보기를 스왑하고 더 이상 런타임에 가져 오기를 처리 할 필요가 없습니다.

Answer 2

사용자의 취향에 따라 [ngSwitch]을 사용하고 해당 구성 요소를 *ngSwitchCase로드해야합니다. 실제로는 컴포넌트로드가 지연되지 않습니다. 그것들은 모두 미리로드되어 있지만 Angular의 DOM 조작 방법을 사용하여 하나의 구성 요소 또는 다른 구성 요소를 표시하거나 숨길 수 있습니다. 예를 들어

: 사용자가 자신의 기본 설정을 변경하면

기본적으로

<div [ngSwitch]="someUserPreference"> 
    <div *ngSwitchCase="grid"> 
     <my-grid-list></my-grid-list> 
    </div> 
    <div *ngSwitchCase="card"> 
     <my-card-view-grid></my-card-view-grid> 
    </div> 
    <div *ngSwitchDefault> 
     <!-- Incorrect preference, let's show grid as a fallback --> 
     <my-grid-list></my-grid-list> 
    </div> 
</div> 

는, 이것은 코드에 반영됩니다. 단추, 라디오 단추 등을 통해 기본 설정을 변경하거나 switch 문에 사용될 변수 또는 속성 someUserPreference에 해당 값을 저장해야합니다.