从编程中创建角度材料中的MD-Menu多个实例2

Question

我需要动态创建多个MD-Menus。由于需要模板参考变量在其语法中，这似乎不是一件容易的事。

例如。如果我有一个ng，以重复使用模板(例如下图(的组件实例的几种情况，我将由于其静态性质而无法调整＃名称(除非有办法？(

<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的动态组件渲染。示例：

@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;
}

我在这里自己解决了这个问题：Angular2：使用管道渲染模板

我最终具有一个常数，其中一些组件名称(表单字段，输入等(，在我的形式视图中，我会动态地渲染每个字段是一个组件本身。

所以您可以拥有类似的东西：

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