Angular2 + - как динамически выделить дочерний компонент и вызвать его функцию?

Question

У меня вопрос по Angular2 + (не AngularJs). Я программист Vue.js, и мне любопытно, возможно ли это в Angular.

Представьте, что у вас есть приложение с множеством модулей, которые выполняют множество задач. У вас есть приложение внешнего интерфейса, отвечающее за мониторинг состояний модуля; отображение журналов, ошибок, информирование пользователя о том, что некоторые модули завершили работу и т. д. Модули взаимодействуют с веб-интерфейсом через WebSocket (или STOMP). Если сообщение получено внешним интерфейсом, оно должно быть обработано, и соответствующее состояние модуля должно быть обновлено (например, заголовок). Поэтому, если Angular получил сообщение, он должен динамически выбрать дочерний компонент и обновить его состояние (вызвать метод child).

Вот как это выглядит в Vue.js:

Содержимое родительского компонента:

<module ref="moduleA" ></module>
<module ref="moduleB" ></module>
<module ref="moduleC" ></module>

Родитель отвечает за обработку связи WebSocket (или STOMP). В новом сообщении он выполняет следующий код:

const message = JSON.parse(messageFromBackend);
const moduleName = message["module"]; // message["module"] is for example 'moduleB'
this.$refs[moduleName].updateTitle(message["title"]);

Таким образом, когда Родитель получает сообщение, он динамически выбирает подходящего дочернего элемента (он знает, какой из правых от бэкэнда ( message ["module"] )), а затем обновляет состояние модуля.

Возможно ли это в Angular?

Answer 1

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

Это фрагмент, где родитель генерирует событие

  emitEvent(){
    this.counter ++;
    let data: MyData = { name: '', somethingElse: this.counter }
    this.mediator.event1.emit(data);
  }

А вот и дочерний компонент подписывается на него

  ngOnInit() {
    this.mediator.event1.subscribe( (data: MyData) =>{
      this.label = data.somethingElse;
    });
  }

Смотрите полный пример здесь: https://stackblitz.com/edit/angular-parent-child-mediator?file=src%2Fapp%2Fapp.component.ts

Answer 2

Вы можете легко получить доступ к дочерним компонентам из родительского. Просто используйте атрибут ViewChild. Класс дочернего компонента:

export class ChildComponent implements AfterViewInit {
    myAction();
}

В шаблоне родительского компонента:

<child-component #child1 ></child-component>
<child-component #child2 ></child-component>
<child-component #child3 ></child-component>

В классе родительского компонента:

export class AppComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child1: ChildComponent;
    @ViewChild(ChildComponent) child2: ChildComponent;
    @ViewChild(ChildComponent) child3: ChildComponent;

    executeOnChildren() {
        this.child1.myAction();
        this.child2.myAction();
        this.child3.myAction();
    }
}

Или, в соответствии с вашими потребностями, вы можете использовать атрибут @ViewChildren:

export class AppComponent implements AfterViewInit {
    @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

    executeOnChildren() {
        for(const child of this.children) {
            child.myAction();
        }
    }
}

https://angular.io/api/core/ViewChild https://angular.io/api/core/ViewChildren