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's suggestion之后（谢谢），我尝试了下一个解决方案但没有成功。即使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作为<RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <RadioButton android:id="@+id/standard_delivery" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/Standard_delivery" android:checked="true" android:layout_marginTop="4dp" android:layout_marginLeft="15dp" android:textSize="12dp" android:onClick="onRadioButtonClicked" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/Midnight_delivery" android:checked="false" android:layout_marginRight="15dp" android:layout_marginTop="4dp" android:textSize="12dp" android:onClick="onRadioButtonClicked" android:id="@+id/midnight_delivery" /> </RadioGroup>后工作了

Answer 1

<强>更新

我很确定您的问题的原因是您希望

constructor(private otherComponent: SecondComponent) {}

做一些实际根本不做的事。

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

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

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

有关详细信息，请参阅this official angular 2 cookbook

<强>原始

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

在这种情况下，这些组件在不同的区域中运行，click事件只会在调用组件中引起更改检测，但不会在callee组件中引起更改检测。

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

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);
        });
    }
}

Answer 2

解决

正如我在问题中编辑的那样，Günter提出的解决方案，即第二系列文件，在UpdateService作为provider添加到@NgModule后工作了1 {} app.module.ts

Angular 2，从不相关的组件

解决

2 个答案:

解决