Angular 角度2，更改另一个组件'；从不相关组件的视图_Angular_Components

Angular 角度2，更改另一个组件'；从不相关组件的视图

angular

Angular 角度2，更改另一个组件'；从不相关组件的视图,angular,components,Angular,Components,我可以从另一个组件更改组件变量的值，如本例中所示console.log（）我的问题是，尽管变量发生了变化，第二个组件的视图仍不会刷新例如： first.component.ts import {Component} from '@angular/core'; import {SecondComponent} from './second.component'; @Component({ selector: 'first', template: ` <h

我可以从另一个组件更改组件变量的值，如本例中所示

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

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

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

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

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

update.service.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();
    }
}

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

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

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

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

从'@angular/core'导入{Injectable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类更新服务{
//可观测串源
private newAnimalSource=新主题（）；
//可观测字符串流
newAnimal$=this.newAnimalSource.asObservable（）；
改变动物（动物：字符串）{
this.newAnimalSource.next（动物）；
}
}

second.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();
    }
}

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

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

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

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

从'@angular/core'导入{Component}；
从“./update.service”导入{UpdateService}；
从'rxjs/Subscription'导入{Subscription}；
从'rxjs/Subject'导入{Subject}；
@组成部分({
选择器：'第二'，
模板：`
第二部分
宠物：{{动物}
改变
`
})
导出类第二组件{
动物：字符串=‘狗’；
认购：认购；
构造函数（私有更新服务：更新服务）{
this.subscription=updateService.newAnimal$.subscripte(
动物=>{
原木（动物）；
这个动物=动物；
});
}
更改（）{
这个动物是‘猫’；
}
}

解决了的

最后，Günter提出的解决方案在

app.module.ts的@NgModule
中添加了UpdateService
作为提供者

我很确定你问题的原因是你期望
constructor(private otherComponent: SecondComponent) {}

去做它实际上根本不做的事情
使用此构造函数，您将获得一个与页面中显示的组件无关的SecondComponent
实例。这就是您的视图未更新的原因。您没有更新可见组件，而是更新了一个完全不相关的类
您需要使用不同的策略来获取对其他组件的引用
最好的方法是根本不获取对组件的引用，而是向两者注入共享服务，并使用可观察对象进行通信
有关更多详细信息，请参阅
原创
如果两个组件“完全不相关”，我假设这意味着它们来自单独的引导模块，因此位于同一页面上的不同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();
    }
}

从'@angular/core'导入{Component，ChangeDetectorRef}；
@组成部分({
选择器：'第二'，
模板：`
第二部分
宠物：{{动物}
改变
`
})
导出类第二组件{
构造函数（私有cdRef:ChangeDetectorRef）{}
动物：字符串=‘狗’；
更改（）{
这个动物是‘猫’；
console.log（this.animal）；
this.cdRef.detectChanges（）；
}
}

或
从'@angular/core'导入{Component，NgZone}；
@组成部分({
选择器：'第二'，
模板：`
第二部分
宠物：{{动物}
改变
`
})
导出类第二组件{
构造函数（专用区域：NgZone）{}
动物：字符串=‘狗’；
更改（）{
此.zone.run（（）=>{
这个动物是‘猫’；
console.log（this.animal）；
});
}
}
已解决
正如我在问题中编辑的那样，Günter提出的解决方案是第二系列文件，在app.module.ts
的@NgModule
中添加了UpdateService
作为提供商之后，该解决方案起了作用。很抱歉，我没有很好地解释我自己。我试图用完全不相关的方式来思考，他们不是彼此的父母或孩子。无论如何，我会试试你的解决方案。谢谢。我的解决方案仅适用于不同角度的应用程序。UpdateService
应添加到@NgModule（…）
装饰程序的提供程序中。在您的情况下，如果将其添加到两个组件，则两个组件都会获得不同的实例。如果其中一个组件是另一个组件的父组件，则您也可以仅在父组件上提供它，或者在另一个组件上提供它，该组件是这两个组件的共同父组件（祖先）。就是这样！，在app.module.ts
中添加了UpateService
作为@NgModule
的提供商，它可以正常工作。非常感谢您准确快速的回答。