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”控制器发出一个“标志”，它会在“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”模板中使用速记连接“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个具有不同参数的视图

1 个答案: