Question

我想在任何组件可以观察和更改的服务中存储一个值，当任何组件更改该值时，所有其他组件都会更新。

经过一些研究，我发现这个解决方案对我有意义但不起作用。

https://plnkr.co/edit/mlVfASdAw1vbpJRhGFov?p=preview

服务

        export class Service {
            value: string;
            subject: Subject<string> = new Subject<string>();
            setValue(value: string): void {
                this.subject.next(value);
            }
            getObservable(): Observable<string> {
                return this.subject.asObservable();
            }
        }

组件1

        @Component({
            selector: 'comp-1',
            template: `
                <div>
                Value in component 1: {{value}}
                </div>
                <button (click)="update()">set value to '1'</button>
            `,
            providers: [Service]
        })
        export class Component1 {
            subscription;
            value: string;
            constructor(private service: Service) {
                this.headerStateSubscription = this.service.getObservable().subscribe(value => {
                    this.value = value;
                });
            }
            update() {
                this.service.setValue('1')
            }
        }

组件2

        @Component({
            selector: 'comp-2',
            template: `
                <div>
                Value in component 2: {{value}}
                </div>
                <button (click)="update()">set value to '2'</button>
            `,
            providers: [Service]
        })
        export class Component2 {
            subscription;
            value: string;
            constructor(private service: Service) {
                this.headerStateSubscription = this.service.getObservable().subscribe(value => {
                    this.value = value;
                });
            }
            update() {
                this.service.setValue('2')
            }
        }

Answer 1

您应该为每个组件使用单例服务而不是单个实例。所以删除

providers: [Service]

从组件元数据

并将其添加到AppModule或公共父组件

<强> Plunker Example

Answer 2

Angular2组件有更好的方法通过事件通知父/子组件某些内容已发生变化。 Angular中不再存在双向数据绑定，就像我们在AngularJS中所知道的那样，它是围绕单向数据流系统设计的，采用更合理的应用程序开发方法。

在更大或更复杂的应用中，最好使用redux模式。

Angular2 Documentation

StackOverflow - What is the proper use of an EventEmitter?

Build a Better Angular 2 Application with Redux and ngrx

Answer 3

我已更新您的plunker以使其正常工作

link - https://plnkr.co/edit/grcuPBYTiDNRfo26UVbB?p=preview

更改了服务和提供商

 value: string;

  subject: Subject<string> = new Subject<string>();

  constructor() {  }

  setValue(value: string): void {
    this.value = value;
    this.subject.next(this.value);
  }

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    App,
    Component1,
    Component2
  ],
  bootstrap: [ App ],
  providers:[Service]
})

但是ngrx是防止意大利面条代码的更好方法

这是使用ngrx或redux模式的经典案例

请查看Angular Ngrx示例的此链接。

https://rahulrsingh09.github.io/AngularConcepts

- ＆GT;高级概念 - ＆gt; ngrx商店

Angular 2组件之间的双向绑定通过服务中的可观察

3 个答案: