Angular 2,从不相关的组件更改另一个组件的视图

Question

我能够从另一个组件更改组件变量的值,如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树的不同分支完全不相关.

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

---

在Günter的建议(谢谢)之后,我尝试了下一个解决方案但没有成功.即使console.log是不工作.

first.component.ts

import {Component} from '@angular/core';
import {UpdateService} from './update.service';

@Component({
    selector: 'first',
    template: `
        <h2>First component</h2>
        <button (click)="changeOutside()">Change</button>
    `
})
export class FirstComponent {
    constructor(private updateService: UpdateService) {}
    changeOutside() {
        this.updateService.changeAnimal('Cat');
    }
}

update.service.ts

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class UpdateService {
    // Observable string sources
    private newAnimalSource = new Subject<string>();
    // Observable string streams
    newAnimal$ = this.newAnimalSource.asObservable();

    changeAnimal(animal: string) {
        this.newAnimalSource.next(animal);
    }
}

second.component.ts

import {Component} from '@angular/core';
import {UpdateService} from './update.service';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';

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

---

解决了

最后,Günter提出的解决方案在添加后UpdateService作为provider其中@NgModule的一部分app.module.ts

Answer 1

更新

我很确定你的问题的原因是你期望的

constructor(private otherComponent: SecondComponent) {}

做一些它实际上根本不做的事情.

使用此构造函数,您将获得一个SecondComponent与页面中显示的组件无关的实例.这就是您的视图未更新的原因.您没有更新可见组件,而是更新完全不相关的类.

您需要使用不同的策略来获取对其他组件的引用.

最好的方法是根本不获取对组件的引用,而是向两者注入共享服务并使用observable进行通信.

有关详细信息,请参阅此官方角2食谱

原版的

如果两个组件"完全不相关",我认为这意味着它们来自单独的自举模块,因此位于同一页面上的不同Angular2应用程序中.

在这种情况下,这些组件在不同的区域中运行,并且click事件将仅在调用组件中引起更改检测,而不在被调用方组件中引起更改检测.

您需要在被调用方中显式调用更改检测以更新视图.例如喜欢

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

@Component({
    selector: 'second',
    template: `
        <h2>Second component</h2>
        <div>Pet: {{animal}}</div>
        <button (click)="change()">Change</button>
    `
})
export class SecondComponent {
    constructor(private cdRef:ChangeDetectorRef){}

    animal: string = 'Dog';
    change() {
        this.animal = 'Cat';
        console.log(this.animal);
        this.cdRef.detectChanges();
    }
}

要么

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

@Component({
    selector: 'second',
    template: `
        <h2>Second component</h2>
        <div>Pet: {{animal}}</div>
        <button (click)="change()">Change</button>
    `
})
export class SecondComponent {
    constructor(private zone:NgZone){}

    animal: string = 'Dog';
    change() {
        this.zone.run(() => {
          this.animal = 'Cat';
          console.log(this.animal);
        });
    }
}