2

我创建了 2 个 angular 5 组件，它们是一个对话框和一个下拉菜单。

我想在对话框中打开下拉组件，所以我为它创建了一个对话服务，它被注入到 app.component 中。app.component 中的代码如下-

import { TestComponent } from './test/test.component';
constructor(private dialog: DialogService){}
openDialog(){
    this.dialog.open(TestComponent, {
      modal: true
    });
  }

TestComponent 非常简单，它在 HTML 文件中有组件选择器，如下所示 -

<once-ui-dropdown
  [options]="customLanguages"
  [allowSearch]="true">
</once-ui-dropdown>

其中 customLanguages 是一系列选项。

DialogService 是一个简单的服务，它做两件事-

1）在body中添加一个对话框组件

这是代码片段-

DialogService.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(DialogComponent)
      .create(this.injector);

this.appRef.attachView(DialogService.componentRef.hostView);

const domElem = (DialogService.componentRef.hostView as 
                EmbeddedViewRef<any>)
                .rootNodes[0] as HTMLElement;

document.body.appendChild(domElem);

DialogService.componentRef.changeDetectorRef.detectChanges();

2：在对话框中打开/追加 TestComponent 到一个 div

    const loadComponentRef = this.componentFactoryResolver
            .resolveComponentFactory(content)
            .create(this.injector);

   loadComponentRef.changeDetectorRef.detectChanges();

   const domElem = (loadComponentRef.hostView as EmbeddedViewRef<any>)
            .rootNodes[0] as HTMLElement;

   data = domElem.innerHTML;

   document.getElementById('loadComponent').innerHTML = data;

最后一件事<once-ui-dropdown是一个 Angular 5 组件，它具有一些功能，如 openDialog、changeOptions 等，它的 HTML 看起来像这样 -

<div class="dropholder" (click)="this.openDropdown()" 
...
...
...

现在，问题是“我能够将数据/道具（选项数组）绑定到下拉组件，但没有调用诸如单击和更改之类的事件。动态加载的组件上的事件绑定似乎有些问题。” . 请帮忙！

4

0 回答 0