如何从 1 个控制器更新具有不同参数的 2 个视图

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" 控制器发出一个 "flag"，它会在 "P" 控制器中触发 onClick($event)。

这个 onClick($event) 专用于通过来自 "A" 控制器的 @ViewChild 函数调用更改 "A" 控制器中的值（像这样：this.componentA.changeAPar();）

所以我需要通过单击 "B" 控制器模板中的按钮来更改 "A" 控制器中的值。

该方案仅适用于选择器的一种用法：

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

如果我使用选择器 2 次，则参数更新，但仅在第一个实例中呈现。

如何进行这项工作？

更新：如果我在 "P" 模板中使用 shorthand 来连接 "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 捕获和处理。

注意：根据记忆编写，未经测试。

如何从 1 个控制器更新具有不同参数的 2 个视图

How to update 2 Views with different Parameters from 1 Controller

angular2-directives

angular2-template

angular