Question

我有一个组件，可以通过调用服务来动态加载/删除另一个组件。我还为动态添加组件提供了删除自身的功能。我的问题是通知其他组件该动态组件实例已删除。

我尝试使用事件输出/发出和主题/订阅没有运气。不确定我是否做错了。

这是我的代码，单击按钮并添加组件后，如果我使用组件内部的关闭按钮，则主按钮对此一无所知，将需要单击两次以向右切换，再加上该按钮将是错误的

https://stackblitz.com/edit/dynamically-row-components-for-smart-table

我在使用主题并订阅主题时遇到的问题在所有情况下都会触发，而不会影响按钮！

Answer 1

您可以做一些事情来使其工作，而不是为所有组件预订一个通用的主题或事件发射器，而是为每个组件动态创建一个唯一的主题。因此，它不会针对所有组件触发。为此，您首先需要为每个组件提供唯一的componentName，或者可以使用id。

data = [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz',
      button: 'Button #1',
      componentName:"component"+1
    }

第2步：为基于componentNae的每行创建注册主题。每次关闭时，将调用相应的订阅，然后您可以从此处删除该组件

    ngOnInit() {
        this.renderValue = this.value.toString().toUpperCase();
         this.InjiService.componentSubjects[this.rowData.componentName] = new Subject();
         this.InjiService.componentSubjects[this.rowData.componentName].subscribe(()=>{

          this.InjiService.removeComponent(this.expanededComp);
          this.expanededComp = null;
          //this.renderValue = this.value.toString().toUpperCase(); //"Open";
          this.isOpen = false;
          //firing the change detection manually
          this.ref.markForCheck();    
        });

  }

请确保您已在服务中声明为componentSubjects

export class InjiService {
 public componentSubjects: { [name: string]: Subject<any> } = {};

Working sample

Angular 6通过服务在两个组件实例之间进行通信

1 个答案: