0

我正在使用内容投影来投影标有指定指令的自定义上下文菜单组件：

@Directive({
    selector: '[contextmenu]'
})
export class ContextMenuDirective{
    @Input() param;     
    constructor(public template: TemplateRef<any>) {}
}

在包含组件中：

<parentComponent>
     <customContextMenu1 *contextmenu="param1" ></customContextMenu1>
     <customContextMenu2 *contextmenu="param2" ></customContextMenu2>
</parentComponent>

在父组件中，我得到了投影的上下文菜单指令，并根据参数确定要显示哪个，方法是从投影指令中获取正确的模板：

@ContentChildren(ContextMenuDirective)
contextMenus: QueryList<ContextMenuDirective>;

并使用 templateOutlet 显示正确的菜单：

<ng-container [ngTemplateOutlet]="selectedContextMenu"></ng-container>

这使我能够通过将各种组件标记为传递一些参数的上下文菜单来添加各种组件。但是，我也希望能够从我的父组件中访问这些组件，因此我可以设置它们的 @Input 并订阅输出（意思是：不仅可以从添加了“ParentComponent”的顶级组件访问这些投影组件' 与投影，但来自 'ParentComponent' 本身。我尝试将 ref 注入指令，因此我可以公开其包含组件，但由于包含组件不同（在示例中 - 有时它是 'contextMenu1' 有时是 'contextMenu2' ）这并没有真正起作用（我尝试从同一个基类继承但没有成功）。所以...底线是：我如何访问不同类型的投影组件的@Inputs 和@Outputs。谢谢！

4

0 回答 0