Question

使用Angular 5，我从一个组件触发一个函数select()，仅用于触发另一个函数的选择，getqr()用于打印。 getqr()触发对从第一个组件中选择的项目的Web请求。为了更新打印视图以反映请求，我使用ChangeDetectorRef。这样做会给我一个错误：

StaticInjectorError(AppModule)[PrintComponent -> ChangeDetectorRef]: StaticInjectorError(Platform: core)[PrintComponent -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!

我不确定这里的问题是什么，因为我无法（并且不应该）在app.module.ts中将ChangeDetectorRef添加到providers。

以下是选择组件的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
    });
  }

}

如何解决此问题或在选择后更新打印组件的视图？

Answer 1

我已经通过将引用从应用程序组件传递给ChangeDetector来解决了这个问题，

即将www.amazon.com###navFooter中的构造函数更改为

app.component.ts

Answer 2

就我而言，我从服务调用 active。

它工作正常。一旦 changeDetectorRef: ChangeDetectorRef 从服务转移到组件。

不要将 ChangeDetectorRef 导入到服务中

NullInjectorError：没有ChangeDetectorRef的提供者

2 个答案: