각도 재료 2의 md-menu 인스턴스를 프로그래밍 방식으로 만듭니다.

Question

여러 md 메뉴를 동적으로 생성해야합니다. 구문에서 템플릿 참조 변수가 필요하기 때문에이 작업은 쉬운 일이 아닙니다.

예 : 내가 ngFor는 아래의 조각 같은 템플릿 구성 요소 인스턴스의 몇 가지 사례를 반복 한 경우 (방법이 없다면?), 나는 그들의 정적 특성으로 # 이름을 조정할 수 아니다

<button [mdMenuTriggerFor]="menu"> 
    <i class="{{icon}}">{{menu_header}}</i> 
</button> 
<md-menu #menu="mdMenu"> 
    <button md-menu-item *ngFor="let m of menu_items">{{m}}</button> 
</md-menu> 

ngFor 내에 포함 된 이러한 구성 요소/템플릿에 활용할 수있는 기술이 있습니까?

Answer 1

ng-container으로 동적 구성 요소 렌더링을 사용해보십시오. 예 : Angular2: Use Pipe to render templates dynamically

내가 (등 양식 필드, 입력,) 일부 구성 요소 이름을 가진 상수가 결국 내 폼보기에서 나는 필드를 렌더링 것 :

@Component({ 
    selector: 'menu-element-a', 
    template: '<li>My menu element. Add more stuff</li>' 
}) 
class MenuElementA { 
} 
@Component({ 
    selector: 'ng-my-menu', 
    template: `<ng-container *ngComponentOutlet="MenuElementA "></ng-container>` 
}) 
class NgMyMenu { 
    MenuElementA = MenuElementA; 
} 

여기이 문제를 직접 해결 동적으로 각 필드는 구성 요소 자체입니다. 그들 각자가 구성 요소입니다

export const MENU_OPTIONS = [ 
    'ComponentA', 
    'ComponentB', 
    'ComponentC', 
] 

:

그래서 당신은 같은 것을 가질 수 있습니다.

그리고 당신은이처럼 사용할 수 있습니다

<menu> 
    <menu-element *ngFor="let field of MENU_OPTIONS"> 
     <ng-container *ngComponentOutlet="field"; 
      ngModuleFactory: myComponentsModule;"></ng-container> 
    </menu-element> 
</menu> 

을 myComponentsModule 우리가 선언하는 일정 내에서 구성 요소를 포함하는 모듈이다.

문서 : https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html