角2级如何共享组件
我试图找出如何一组子组件的切换变量之间的变量 我有这视图状态之间进行切换编辑表单控件这个组件角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}} </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,我怎样才能做到这一点?
您可能需要实施一项服务,以保持州和所有子组件订阅状态和父推送更改。
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}`;
}
}
你能解释这是如何工作什么布尔将它保存为可编辑服务 –
没关系我觉得这是有道理的 –
如果你想要多个可编辑服务 –
rsjx ng/store - 这是redux的生活方式。有一个单一的商店,管理所有的国家,并没有在您的组件复杂 –
@SamRedway我怎么可以使用 –
这是一个很大的问题类型的简短答案。这里是文档。我强烈建议它的任何应用程序是不是完全无关https://github.com/ngrx/store –