Как обновить 2 представления с разными параметрами от 1 контроллера

Question

Скажем, у нас есть родительский контроллер "P" и 2 дочерних элемента: "A" и "B".

Контроллер "A" имеет вход и используется в шаблоне "P" дважды с различными параметрами:

    <A-app [input]='param1'></A-app>
    <A-app [input]='param1'></A-app>
    <B-app (flag)="onClick($event)"></B-app>

Контроллер "B" содержит кнопку. Если я нажимаю на шаблоне "B" на этой кнопке, из контроллера "B" выдается "флаг", который вызывает onClick($event) в "P" контроллере.

это onClick($event) предназначенный для изменения значения в контроллере "A" посредством вызова функции @ViewChild из контроллера "A" (например:this.componentA.changeAPar();)

Поэтому мне нужно изменить значение в контроллере "A", нажав на кнопку в шаблоне контроллера "B".

Эта схема прекрасно работает только при одном использовании селектора:

    <A-app [input]='param1'></A-app> //<---- 1 usage
    <B-app (flag)="onClick($event)"></B-app>

Если я использую селектор 2 раза, то параметры обновляются, но рендерится только в первом случае.

Как заставить это работать?

обновление: тот же эффект, если я использую сокращение в шаблоне "P" для соединения "A" и "B":

<A-app #a-app [input]='param1'></A-app>
<A-app #a-app [input]='param1'></A-app>
<B-app (flag)="#a-app.changeAPar()"></B-app>

Answer 1

Я считаю, что вы ищете здесь ловушку жизненного цикла OnChanges. В вашем компоненте "А" вы можете подписаться на изменения, которые происходят на input параметр и реагировать соответственно. Это будет выглядеть примерно так:

import {Component, Input, OnChanges} from '@angular/core';

@Component({
    selector: 'A',
    moduleId: module.id,
    template: `// omited for brevity`
})

export class AComponent implements OnChanges {
    @Input() input: string;

    ngOnChanges(changes: { [propName: string]: any }) {
        if (changes['input'] && changes['input'].currentValue) {
            // handle change
        }
    }
}

Компонент Б

import {Component, Output} from '@angular/core';

@Component({
    selector: 'B',
    moduleId: module.id,
    template: `// omited for brevity`
})

export class BComponent {
    @Output() onClick = new EventEmitter<string>();

    click(aValue: string):void {
        this.onClick.emit(aValue);
    }
}

Родительский компонент

import {Component} from '@angular/core';
import {AComponent, BComponent} from '...'

@Component({
    selector: 'P',
    moduleId: module.id,
    template: `
        <A [input]='param1'></A-app>
        <A [input]='param1'></A-app>
        <B (onClick)="onClick($event)"></B-app>`
})

export class PComponent {
    param1: string = '';

    onClick(aValue: string):void {
        this.param1 = aValue;
    }
}

Таким образом, любые изменения, внесенные в input в родительском компоненте будет пойман и обработан ngOnChanges,

ПРИМЕЧАНИЕ: записано по памяти и не проверено.