Ref Detector Ref не работает с диалоговым окном Angular Material - PullRequest
Новая
       0

Ref Detector Ref не работает с диалоговым окном Angular Material

1 голос
/ 12 октября 2019

Мне нужна помощь для правильной реализации ChangeDetectorRef.

То, что я пытаюсь сделать, открывает диалоговое окно Mat по щелчку, но каждый раз, когда я добавляю конструктор ChangeDetectorRef, диалоговое окно разрывается, давая мне ошибку NullInjectorError: StaticInjectorError (AppModule) [ViewAdvertComponent -> ChangeDetectorRef]: StaticInjectorError (Platform: core) [ViewAdvertComponent -> ChangeDetectorRef]: NullInjectorError: нет поставщика для ChangeDetectorRef!

даже если они ошибочно ссылаются, даже если бы я не ссылался на них, даже если бы я ссылался на них, даже если бы я ссылался на них, я бы даже не ссылался на них, даже если бы я ссылался на них, даже если бы я ссылался на них, даже если бы я ссылался на них, даже если бы я ссылался на них, даже если бы я ссылался на них, я бы даже не ссылался на них, но я бы даже не ссылался на них, даже если бы я ссылался на них, но я бы даже не ссылался на них, даже если бы я ссылался на них, даже если бы они не ссылалисьслишком сложен для моих знаний.

HomePage.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++;
      }
    });
  }

}

1 Ответ

0 голосов
/ 12 октября 2019

Я подозреваю, что вы получаете ошибки, потому что вы неправильно используете внедрение зависимостей. Если вы хотите внедрить класс в другой, вам нужно добавить декоратор @Injectable({}) к внедренному классу. В Angular такой класс условно называется Сервисом. Взгляните на документацию внедрения зависимостей .

...