1

我有一个组件通过调用服务动态加载/删除另一个组件。我还让动态添加组件能够自行删除。我的问题是通知其他组件动态组件的这个实例已被删除。

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

这是我的代码，一旦单击按钮并添加了组件，如果我在组件内使用关闭按钮，则主按钮不知道这一点，它需要单击 2 次才能向右切换，加上按钮的文本将是错的

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

我在使用主题并订阅它时遇到的问题会在不影响按钮的情况下针对所有实例触发！

4

1 回答 1

1

您可以做一些事情来让它工作，而不是为所有组件订阅一个公共主题或事件发射器，而是为每个组件动态创建一个唯一的主题。所以它不会为所有组件触发。首先，您需要为每个组件提供一个唯一的组件名称，或者您可以使用 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> } = {};

工作样本

于 2019-05-23T17:39:39.233 回答