小编Man*_*nel的帖子

我能够从另一个组件更改组件变量的值,如console.log()本例所示.

我的问题是,尽管变量发生变化,第二个组件的视图仍不会刷新.

例:

first.component.ts

import {Component} from '@angular/core';
import {SecondComponent} from './second.component';

@Component({
    selector: 'first',
    template: `
        <h2>First component</h2>
        <button (click)="changeOutside()">Change</button>
    `,
    providers: [SecondComponent]
})
export class FirstComponent {
    constructor(private otherComponent: SecondComponent) {}
    changeOutside() {
        this.otherComponent.change();
    }
}

second.component.ts

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

@Component({
    selector: 'second',
    template: `
        <h2>Second component</h2>
        <div>Pet: {{animal}}</div>
        <button (click)="change()">Change</button>
    `
})
export class SecondComponent {
    animal: string = 'Dog';
    change() {
        this.animal = 'Cat';
        console.log(this.animal);
    }
}

这两个组件与 DOM树的不同分支完全不相关.

我也尝试了第一个发出事件的组件,第二个组件使用相同的结果订阅它,变量发生了变化,但是视图没有更新. …