Les types ont des déclarations séparées d'une propriété privée

Question

J'apprends Angular et je suis tombé sur cette erreur:

La classe 'SnackbarService' étend incorrectement la classe de base 'MatSnackBar'. Les types ont des déclarations séparées d'une propriété privée '_overlay'.

lorsque vous tentez d’extraire MatSnackBar de @ angular/material.

Ceci est mon code:

import { Injectable, Injector } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Overlay } from '@angular/cdk/overlay';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { BreakpointObserver } from '@angular/cdk/layout';

@Injectable()
export class SnackbarService extends MatSnackBar{

  constructor(
    private _overlay: Overlay, 
    private _liveAnnouncer: LiveAnnouncer,
    private _injector: Injector,
    private _breakPointObserver: BreakpointObserver,
    private _matSnackBar: MatSnackBar) {

      super(_overlay, _liveAnnouncer, _injector, _breakPointObserver, _matSnackBar);
     }

}

Toute aide expliquant pourquoi cela se produit serait vraiment appréciée.

Answer 1

Parce que vous avez créé votre propre _overlay qui est déjà défini dans la classe de base MatSnackBar. Supprimez la partie private de la déclaration et héritez-la de la classe de base. Faites la même chose pour les autres.

@Injectable()
export class SnackbarService extends MatSnackBar{

  constructor(
    _overlay: Overlay, 
    _liveAnnouncer: LiveAnnouncer,
     _injector: Injector,
    _breakPointObserver: BreakpointObserver,
    _matSnackBar: MatSnackBar) {

      super(_overlay, _liveAnnouncer, _injector, _breakPointObserver, _matSnackBar);
     }

}

Vous pouvez toujours y accéder via this.