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

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或公共父组件

普伦克示例

Answer 2

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

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

角度2 文档

StackOverflow - EventEmitter 的正确用法是什么？

使用 Redux 和 ngrx 构建更好的 Angular 2 应用程序

Answer 3

我已经更新了你的 plunker 让它工作

链接 - 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 模式的经典案例

请查看此链接以获取角度Ngrx示例。

https://rahulrsingh09.github.io/AngularConcepts

-> 先进概念 -> ngrx商店