ngOnInit에서 서비스 메소드에 액세스하는 방법은 무엇입니까?

Question

저는 Angular 2와 Typescript에 익숙하지 않습니다. 생성자와 ngOnInit을 사용하여 새로 고침하고 있습니다.

from this stackblitz example

나는 다음에 생성자에서 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_1.MediaMatcher.matchMedia is not a function 얻을 :

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에서 동일한 작업을 수행하는 방법을 알고 싶습니다.

Answer 1

사용하여 호출 할 필요가 Demo

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)); 
    } 

Answer 2

당신은 액세스 this

를 사용하여 속성을 생성자를 통해 MediaMatcher를 주입하고 그런 다음 (액세스 한정자) 생성자의 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); 
    }