Javascript Angular 2如何在组件之间共享变量

我试图找出如何在一组子组件中切换变量 我有一个可编辑表单控件的组件，可以在视图状态之间切换

import {
    Component,
    Input,
    ElementRef,
    ViewChild,
    Renderer,
    forwardRef,
    OnInit
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InlineEditComponent),
    multi: true
};

@Component({
  selector: 'inline-edit',
  templateUrl: 'inline-edit.html',
  providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR],
})
export class InlineEditComponent implements ControlValueAccessor, OnInit {

    @ViewChild('inlineEditControl') inlineEditControl: ElementRef;
    @Input() label: string = '';
    @Input() type: string = 'text';
    @Input() required: boolean = false;
    @Input() disabled: boolean = false;
    private _value: string = '';
    private preValue: string = '';
    public editing: boolean = false;
    public onChange: any = Function.prototype;
    public onTouched: any = Function.prototype;

    get value(): any {
        return this._value;
    }

    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }

    writeValue(value: any) {
        this._value = value;
    }

    public registerOnChange(fn: (_: any) => {}): void {
        this.onChange = fn;
    }

    public registerOnTouched(fn: () => {}): void {
        this.onTouched = fn;
    }

    constructor(element: ElementRef, private _renderer: Renderer) {
    }

    ngOnInit() {
    }

}


<div>
  <div [hidden]="!editing">
    <input #inlineEditControl [required]="required" [name]="value" [(ngModel)]="value" [type]="type" [placeholder]="label" />
  </div>
  <div [hidden]="editing">
    <label class="block bold">{{label}}</label>
    <div tabindex="0" class="inline-edit">{{value}}&nbsp;</div>
  </div>
</div>

---

我想获取所有可编辑表单控件，并将所有控件中的编辑标志都设置为true，我如何才能做到这一点？

您可能需要实现一个服务，使状态和所有子组件都订阅状态，并将父项推送更改

import {Component, NgModule, VERSION, Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

export class EditableService {
  subject = new BehaviorSubject(true);
  getAsObservable() {
    return this.subject.asObservable();
  }
}

@Component({
  selector:'editable',
  template: '<div>i am editable {{ x | async}}</div>'
})
export class Editable {
  constructor(private editableService: EditableService) {
    this.x = editableService.getAsObservable();
  }
}

@Component({
  selector: 'my-app',
  template: `
    <editable></editable>
    <editable></editable>

    <hr/>
    <button (click)="change()">change</button>
  `,
  providers: [EditableService]
})
export class App {
   change() {
    this.editableService.subject.next(false);
   }

   constructor(private editableService: EditableService) {
    this.name = `Angular! v${VERSION.full}`;
  }

 }

import{Component，NgModule，VERSION，Input}来自'@angular/core'
从“@angular/platform browser”导入{BrowserModule}
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
导出类可编辑服务{
主题=新行为主题（true）；
getAsObservable（）{
返回此.subject.asObservable（）；
}
}
@组成部分({
选择器：'可编辑'，
模板：“我是可编辑的{x | async}”
})
导出类可编辑{
构造函数（私有editableService:editableService）{
this.x=editableService.getAsObservable（）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`

改变
`,
提供者：[可编辑服务]
})
导出类应用程序{
更改（）{
this.editableService.subject.next（false）；
}
构造函数（私有editableService:editableService）{
this.name=`Angular！v${VERSION.full}`；
}
}

rsjx ng/store-这就是redux的生活目的。拥有一个管理所有状态的单一存储，并且在您的应用程序中没有复杂性components@SamRedway我怎么能用它呢？对于一个简短的回答来说，这是一个很大的问题。这是文件。我强烈推荐它用于任何并非完全琐碎的应用程序。你能解释一下它是如何工作的吗？布尔值保存在哪里？可编辑服务只需注入到每个父应用程序中即可-angular di系统将创建新实例，所有子应用程序都将看到此特定实例

import {Component, NgModule, VERSION, Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

export class EditableService {
  subject = new BehaviorSubject(true);
  getAsObservable() {
    return this.subject.asObservable();
  }
}

@Component({
  selector:'editable',
  template: '<div>i am editable {{ x | async}}</div>'
})
export class Editable {
  constructor(private editableService: EditableService) {
    this.x = editableService.getAsObservable();
  }
}

@Component({
  selector: 'my-app',
  template: `
    <editable></editable>
    <editable></editable>

    <hr/>
    <button (click)="change()">change</button>
  `,
  providers: [EditableService]
})
export class App {
   change() {
    this.editableService.subject.next(false);
   }

   constructor(private editableService: EditableService) {
    this.name = `Angular! v${VERSION.full}`;
  }

 }