更改检测器参考不适用于 Angular Material 对话框

Question

我需要帮助才能正确实施 ChangeDetectorRef。

我想要做的是点击打开一个 Mat 对话框，但每次我添加 ChangeDetectorRef 构造函数时，对话框都会中断，给我错误 NullInjectorError: StaticInjectorError(AppModule)[ViewAdvertComponent -> ChangeDetectorRef]: StaticInjectorError（平台：核心）[ViewAdvertComponent -> ChangeDetectorRef]： NullInjectorError: 没有 ChangeDetectorRef 的提供者！

我可能只是错误地引用了它们，但就我所知，即使是文档也太复杂了。

主页.ts

import { Component, OnInit, NgModule, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MaterialModule } from 'src/materialModule';
import { LoginService, iMakes } from '../login-popup/login.service';
import { HomePageService } from './home-page.service';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RegisteredUserService } from '../registered-user/registered-user.service';
import { MatDialog } from '@angular/material/dialog';
import { ViewAdvertComponent } from '../view-advert/view-advert.component';
import { SendAdvertIDService } from './sendAdvertID.service';
import { MatPaginator } from '@angular/material/paginator';
import { Observable } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';
@NgModule({imports:[MaterialModule]})

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css'],
  providers:[ViewAdvertComponent]
})

export class HomePageComponent implements OnInit {

  @ViewChild(MatPaginator,{static:false}) paginator: MatPaginator;

  public apiURL = environment.api; 
  public isImageLoading:any;
  public adverts:any=[];
  public imageToLoad:any=[];
  public obs: Observable<any>;
  public dataSource:MatTableDataSource<Card>;
  public selected;
  public advertID:any;

  constructor(private cd: ChangeDetectorRef,private advertIDService:SendAdvertIDService, private popup:MatDialog,private http:HttpClient,private lservice:LoginService, private snack:MatSnackBar,private registeredUserService:RegisteredUserService) {}

  ngOnInit() {
    this.registeredUserService.GetAllAdverts().subscribe(val=>
      {
        this.dataSource = new MatTableDataSource<Card>(val);
        this.dataSource.paginator = this.paginator;
        this.obs = this.dataSource.connect();
        let numOfAds=0;
        for(let a of val)
        {
         this.imageToLoad[numOfAds]={url:this.apiURL+'/api/Images/'+a.advertID+'_1'};

          numOfAds++;
        }
      },error => this.snack.open("Something went wrong. Please try again later")._dismissAfter(5000));   
  }

ViewAdvert(e) //method that opens the dialog box
  {
    this.cd.markForCheck();
    this.advertIDService.SetAdvertID(e);
    this.popup.open(ViewAdvertComponent,{
      width: '500px',
    });
  }

ViewAdvert.ts（在对话框内执行）

import { Component, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy} from '@angular/core';
import { HomePageComponent } from '../home-page/home-page.component';
import { SendAdvertIDService } from '../home-page/sendAdvertID.service';
import { ViewAdvertService, iAdvertID } from './view-advert.service';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-view-advert',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './view-advert.component.html',
  styleUrls: ['./view-advert.component.css']
})
export class ViewAdvertComponent {
  @ViewChild('slideshow',{static:false}) slideshow:any;
  public advertID:String;
  public apiURL = environment.api;
  public imageID:any;
  public imageSource:any=[];
  public imageToSlideShow:any=[];
  public counter:any=0;
  public faultyImages:any=[];
  constructor(private cd: ChangeDetectorRef,public home:HomePageComponent,private advertIDService:SendAdvertIDService, private viewService:ViewAdvertService) {
    this.advertID=home.advertID;

  }
  ngOnInit(e) {
    this.cd.markForCheck();
    this.advertID= this.advertIDService.GetAdvertID();
    let param:iAdvertID={
     id:this.advertID
    }
   this.viewService.AdvertDetails(param).subscribe(val=>
    {
      this.imageID=val[0].advertID;
      this.counter=1;
      for(let i=0;i<=4;i++)
      {
        this.imageSource[i]=this.apiURL+'/api/Images/'+this.imageID+'_'+this.counter;
        this.faultyImages[i]=e;
        if(this.imageSource[i]==this.faultyImages[i])
        {
          console.log(this.faultyImages[i]);
        }
        else{
          this.imageToSlideShow[i]=this.imageSource[i];
        }
        this.counter++;
      }
    });
  }

}

Answer 1

您不能将一个组件 (ViewAdvertComponent) 注入另一个组件 (HomePageComponent)。

但我认为你不需要那个，但是这个https://material.angular.io/components/dialog/。

Answer 2

我怀疑您收到错误是因为您没有正确使用依赖注入。当您想将一个类注入另一个类时，您需要将 @Injectable({}) 装饰器添加到注入的类中。在 Angular 中，这样的类通常被称为服务。查看dependency injection 文档。