我有一个组件(FormContentsComponent
),该组件将一些信息发送到另一个组件(FormConfigComponent
)。它们没有关系(父母->孩子)。
当用户关闭模式(FormContentsComponent
)时,仅需 更新组件(FormConfigComponent
)。
我该如何实现?我应该创建一个通知更改的服务吗?
FormContentsComponent
import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FormContentConfigService } from '../../services/form-content-config.service';
@Component({
selector: 'app-form-contents',
templateUrl: './form-contents.component.html',
styleUrls: ['./form-contents.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FormContentsComponent implements OnInit {
@Input() column;
sendDataToModal(content): void {
this.formContentConfigService.setContent(content);
}
}
FormConfigService
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FormContentConfigService {
newFormConfigSubject = new Subject<any>();
constructor() {}
setContent(content) {
this.newFormConfigSubject.next(content);
}
getContent() {
return this.newFormConfigSubject.asObservable();
}
}
FormConfigComponent
import { Component, OnInit, Input, Output, ViewChild, TemplateRef, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { FormContentConfigService } from './../../services/form-content-config.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
@Component({
selector: 'app-form-config',
templateUrl: './form-config.component.html',
styleUrls: ['./form-config.component.css'],
//changeDetection: ChangeDetectionStrategy.OnPush
})
export class FormConfigComponent implements OnInit {
@Input() formConfig: FormGroup;
@ViewChild('modal') modal: TemplateRef<any>;
closeResult: string;
options: NgbModalOptions;
constructor(
private formContentConfig: FormContentConfigService,
private fb: FormBuilder,
private modalService: NgbModal,
private cd: ChangeDetectorRef
) { }
ngOnInit() {
this.options = {
size: 'lg',
backdrop : 'static',
keyboard : false,
centered: true
};
this.formContentConfig.getContent().subscribe(
(d) => {
let data = {...d};
this.formConfig = this.fb.group({
html: this.fb.group({
'text': [data.html.text, [
Validators.required
]],
})
});
let m = this.modalService.open(this.modal, this.options)
m.result.then((result) => {
this.closeResult = `Closed with: ${result}`;
if (typeof d.html !== undefined) {
d.html = {...d.html, ...this.formConfig.value.html};
}
console.log(d);
}, (reason) => {
//this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
);
}
}