Angular 2如何在組件之間共享變量

Question

我試圖弄清楚如何在一組子組件中切換變量，我有這個組件用於可編輯的表單控件，該控件可在視圖狀態之間進行切換

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

export class EditForm {
   //I want to do something like this:
   public toggleEdit(fn: () => {}): void {
      var editableFormControls = $('#selector: 'inline-edit');
      editableFormControls.forEach(control => control.editing = true)
   }     
}

我想獲取所有可編輯的表單控件，並將所有控件的編輯標志設置為true，我該怎么做？

Answer 1

您可能需要實現一項服務，該服務保持狀態，所有子組件都訂閱該狀態，並且父級推送更改在那里。

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

 }