如何检测Angular 9中所有组件的共享数据服务更改？

如何解决如何检测Angular 9中所有组件的共享数据服务更改？

我正在使用自定义库编写Angular应用程序。 有几个嵌套组件。

在子组件中，我单击按钮以设置表单中的新数据。

<button ... (click)="createFile()" >Create file</button>

child.component.html

<form [formGroup]="starterFormArray" *ngIf="starterFormWithStepper">
     <mat-horizontal-stepper #stepper>
         <mat-step *ngFor="let step of starterFormSteps; let index = index; let last = last;">
             <ng-template matStepLabel>{{ step.label }}</ng-template>
             <formly-form
                      [form]="starterFormArray.at(index)"
                      [model]="starterModel"
                      [fields]="step.fields"
                      [options]="starterOptions[index]">
              </formly-form>
         </mat-step>
     </mat-horizontal-stepper>
     <div class="wrapper-actions-for-stepper">
          <div class="part-toolbar">
              <button mat-stroked-button (click)="goBack(stepper)" type="button" [disabled]="stepper.selectedIndex === 0">Back</button>
              <button mat-stroked-button (click)="goForward(stepper)" type="button" [disabled]="stepper.selectedIndex === starterFormSteps.length-1">Next</button>
          </div>
          <div class="part-toolbar">
              <button mat-raised-button [disabled]="!starterFormArray.valid" (click)="createFile()" >Create file</button>
          </div>
      </div>
  </form>

子组件函数CreateFile()在共享数据服务内设置var

child.component.ts

@Component({
  selector: 'foo-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss'],providers:  [ DataService,provideParent( ParentComponent,BaseComponent  ) ]
})

export class ChildComponent extends BaseComponent implements OnInit,AfterViewInit,AfterViewChecked,AfterContentInit {

     starterForm: FormGroup;
     starterFormArray: FormArray;
     starterModel: CurrentProject;
     starterFormFields: Array<FormlyFieldConfig>;
     starterFormSteps: Array<StepType>;
     starterOptions: any;
     starterFormWithStepper: boolean;

     constructor(elRef: ElementRef,data: DataService ) {
         super(elRef);
         this.sharedData = data;
     }

     createFile() {
          this.sharedData.changeUserFile( this.starterModel );
     }
}

sharedData参数在BaseComponent中声明。

base.component.ts

import {DataService} from '../../common/services/data.service';

export class BaseComponent{
    public sharedData: DataService;
}

在共享服务中，我试图提供一种方法来检测使用该共享库的所有组件的所有更改。

data.service.ts

@Injectable()
export class DataService{
    public file: BehaviorSubject<CurrentProject> = new BehaviorSubject(null);
    public changeFile = this.file.asObservable();
    
    constructor( public cdref: ChangeDetectorRef ) {}

    changeUserFile( newData: CurrentProject ){
        this.file.next(newData);
        alert(JSON.stringify( this.file.getValue())); //<-- it works !
        this.cdref.detectChanges();
    }
}

但是parent.component.ts从未检测到更改。

parent.component.ts

@Component({
    selector: 'foo-parent',templateUrl: './parent.component.html',styleUrls: ['./parent.component.scss'],encapsulation: ViewEncapsulation.None,provideParent( ParentComponent ) ]
})
export class ParentComponent extends BaseComponent implements OnInit,OnChanges{
      
     @Input() fileName: string;
      
      constructor(elRef: ElementRef,data: DataService,private cdref: ChangeDetectorRef ) {
           this.sharedData = data;
      }

      ngOnInit() {
          super.ngOnInit();
          this.sharedData.changeFile.subscribe( ( fileModified) => {
              if ( ( fileModified !== null ) && ( fileModified.getFileName() !== this.fileName ) ) {
                  alert('Never Called');
                  this.fileName = fileModified.getFileName();
              }
          }); 
      }
      ngOnChanges(changes: SimpleChanges) {
          alert('change only when the page is loaded');
      }
}

由于某些原因，parent.component.ts无法实现数据，this.sharedData.changeFile.subscribe()无法正常工作。 我测试了ngOnChanges和ChangeDetectorRef，但没有成功。

有人知道这个问题吗？

解决方法

每个组件都是类的另一个实例。扩展并不能使它们共享相同的值，而是将服务实例化一次，并在服务模块范围内的各处注入构造函数，从而获得相同的实例。

简单的解决方案是注入DataService并对其进行订阅，这将指向应用程序中各处的相同引用。

例如伪代码：

DataService

class DataService {
  public file: BehaviorSubject<CurrentProject> = new BehaviorSubject(null);

  setDataMethod(newData: CurrentProject) {
    this.file.next(newData);
  }
}

ParentComp

class ParentComp extends BaseComp implements OnInit{
   constructor(private (or public to access from html) dataService: DataService) {}
   
   ngOnInit(){
     this.dataService.file.subscribe(changedFile => {
        //do stuff
     })
   }
}

或DataService在提供程序中的同一模块中的任何其他相关/不相关子组件

class ParentComp extends BaseComp implements OnInit {
   constructor(private (or public to access from html) dataService: DataService) {}
   
   ngOnInit(){
     this.dataService.file.subscribe(changedFile => {
        //do stuff
     })
   }
}