如何手动更改不相关组件的检测(OnPush)(使用Observables)?

时间:2019-03-18 17:22:34

标签: javascript angular

  1. FormConfigComponent :模态组件
  2. FormContentsComponent :需要更新的我的组件。

我有一个组件(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)}`;
                });


            }
        );
    }


}

0 个答案:

没有答案