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

Question

Скажем, у нас есть родительский контроллер «P» и 2 ребенка: «A» и «B».

Контроллер «А» имеет вход и используется в «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 крюк жизненного цикла. В компоненте «A» вы можете подписаться на изменения, которые происходят в параметре 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 
     } 
    } 
} 

Компонент B

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.

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