Angular 6 взаимодействует между двумя экземплярами компонентов через сервис

Question

У меня есть компонент, который загружает / удаляет другой компонент динамически, вызывая службу.Я также даю динамически добавляемому компоненту возможность удалить себя.Моя проблема заключается в уведомлении другого компонента о том, что этот экземпляр динамического компонента удален.

Я безуспешно пытался использовать вывод / вывод события и тему / подписку.Не уверен, что я делаю это неправильно.

Вот мой код, после нажатия кнопки и добавления компонента, если я использую кнопку закрытия внутри компонента, основная кнопка не знает об этом идля переключения вправо потребуется 2 щелчка, плюс текст кнопки будет неправильным

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

Проблема, с которой я столкнулся при использовании объекта и подписке на него, запускается для всех случаев, не затрагиваякнопка!

Answer 1

Вы можете сделать несколько вещей, чтобы заставить его работать, вместо того, чтобы подписывать общую тему или источник событий для всех компонентов, динамически создавать уникальные темы для каждого компонента.Так что он не будет срабатывать для всех компонентов.Для этого сначала вам нужно предоставить уникальное имя компонента для каждого компонента, или вы можете использовать идентификатор.

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();    
        });

  }

Пожалуйста, убедитесь, что вы объявили компоненты компонента в вашем сервисе

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

Рабочий образец