angular - NullInjectorError : No provider for ChangeDetectorRef

Question

使用 Angular 5，我正在触发一个函数，select()从一个组件仅用于触发另一个功能的选择，getqr()在另一个组件中进行打印。 getqr()为从第一个组件中选择的项目触发 Web 请求。为了更新打印 View 以反射(reflect)请求，我使用了 ChangeDetectorRef .这样做给我一个错误:
StaticInjectorError(AppModule)[PrintComponent -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[PrintComponent -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!
我不确定这里的问题是什么，因为我不能(也不应该)添加 ChangeDetectorRef至 providers在 app.module.ts 中。

这是选择组件的 TS:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PrintComponent } from './print/print.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  docs;

  constructor(public http: HttpClient, public print: PrintComponent) { }

  ngOnInit() {
    this.http.get("https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=DocumentGroup,Title").subscribe(data => {
      this.docs = data['value'];
    });
  }

  select(ID, selected){
    if (selected == true) {
      this.print.selecteddocs.push(ID); //Adds selection to array on Print Component
    }
    else {
      var index = this.print.selecteddocs.indexOf(ID);
      this.print.selecteddocs.splice(index, 1); //Removes selection from array on Print Component
    }
    this.print.getqr(); //fires getqr() from Print Component
  }

}

这是打印组件的 TS:

import { Component, OnInit, ChangeDetectorRef} from '@angular/core';
.....

@Component({
  selector: 'app-print',
  templateUrl: './print.component.html',
  styleUrls: ['./print.component.css'],
})
export class PrintComponent implements OnInit {
  barcodeitems;
  selecteddocs = [];

  constructor(public http: HttpClient, private cdr: ChangeDetectorRef){
  }

  ngOnInit(): void {
  }

  getqr() {
    console.log("selecteddocs array", this.selecteddocs);
    let filterQuery = this.selecteddocs.map(i => `ID eq '${i}'`).join(" or ");
    let url = `https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
    this.http.get(url).subscribe(data => {
      console.log("data.value", data['value']); //Correctly logs results
      this.barcodeitems = data['value'];
      this.cdr.detectChanges(); //Attempt to refresh the view
    });
  }

}

做出选择后，如何解决此问题或更新打印组件的 View ？

Answer 1

我通过从应用程序组件传递对 ChangeDetector 的引用解决了这个问题，

即更改 app.component.ts 中的构造函数到

constructor(
    changeDetectorRef: ChangeDetectorRef,
    ms: MobileService) {
  ms.setChangeDetector(changeDetectorRef);
}