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

我想抓住所有的ediiitable表单控件，并在所有这些设置编辑标志设置为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}`; 
    } 

}