Angular 如何在ngOnInit中访问服务方法？

我是Angular 2和Typescript的新手，我的构造函数和ngOnInit即将到期

为什么我可以在构造函数中使用

matchMedia

，如下所示：

import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component} from '@angular/core';

/** @title Responsive sidenav */
@Component({
  selector: 'sidenav-responsive-example',
  templateUrl: 'sidenav-responsive-example.html',
  styleUrls: ['sidenav-responsive-example.css'],
})
export class SidenavResponsiveExample {
  mobileQuery: MediaQueryList;

  private _mobileQueryListener: () => void;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

但当我尝试在ngOnInit中使用

matchMedia

时，我得到

ERROR-TypeError:layout\u 1.MediaMatcher.matchMedia不是一个函数

：

import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';

/** @title Responsive sidenav */
@Component({
  selector: 'sidenav-responsive-example',
  templateUrl: 'sidenav-responsive-example.html',
  styleUrls: ['sidenav-responsive-example.css'],
  providers: [MediaMatcher]
})
export class SidenavResponsiveExample implements OnInit {
  mobileQuery: MediaQueryList;
  mobileQuery = {matches:false};
  foo: MediaMatcher;


  private _mobileQueryListener: () => void;

  ngOnInit() {
    this.mobileQuery = MediaMatcher.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => ChangeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

---

我知道构造函数用于初始化，它比ngOnInit更适合。我只是在做实验，想知道如何在ngOnInit中做同样的事情

您需要通过构造函数注入

MediaMatcher

，并使用

this

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnInit() {
    this.mobileQuery = this.media.matchMedia('(max-width: 600px)'); // use this
    this._mobileQueryListener = () => ChangeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

---

您需要在构造函数中注入dependecny（使用访问修饰符），然后使用

this

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnInit() {
    this.mobileQuery = this.media.matchMedia('(max-width: 600px)'); // use this
    this._mobileQueryListener = () => ChangeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

 constructor(private changeDetectorRef: ChangeDetectorRef,private media: MediaMatcher) {

      }
    ngOnInit(){
      this.mobileQuery = this.media.matchMedia('(max-width: 600px)');
        this._mobileQueryListener = () => this.changeDetectorRef.detectChanges();
        this.mobileQuery.addListener(this._mobileQueryListener);
    }
      ngOnDestroy(): void {
        this.mobileQuery.removeListener(this._mobileQueryListener);
      }

      shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
    }