一、@Injectable()

如果所建立的服務不依賴於其他物件，是可以不用使用 Injectable 類裝飾器。但當該服務需要在建構函式中注入依賴物件，就需要使用 Injectable 裝飾器。不過比較推薦的做法不管是否有依賴物件，在建立服務時都使用 Injectable 類裝飾器。

例如，app.component.ts中引用服務Loading.ts：

app.componets.ts中

import { Component, ElementRef, ViewChild} from '@angular/core';
import { Loading } from './providers/Loading'
 
;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent{
  @ViewChild('loading') loading: ElementRef;

  constructor(
    public _Loading: Loading) {
  }
}

Loading.ts中

import {Injectable} from '@angular/core';

@Injectable()
export class Loading
 
 {

}

參考

二、export class AppComponent implements AfterViewInit

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}

ngAfterViewInit（）是在Angular完成元件檢視初始化之後立即呼叫的回撥方法。例項化檢視時僅呼叫一次。

三、ElementRef+AfterViewInit+ViewChild+Renderer

1. ElementRef

獲取到頁面的div

import { Component, ElementRef} from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <div>666</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private elementref:ElementRef){
    //呼叫構造方法的時候app-root元素下的子元素還沒有建立，settimeout()一下
    setTimeout(()=>{
      //獲取到頁面的dom元素divEle
      let divEle = this.elementref.nativeElement.querySelector('div');
      console.dir(divEle);
    },0);
  }
}

2.setTimeOut()可用ngAfterViewInit()代替

import { Component, ElementRef} from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <div>666</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private elementref:ElementRef){

  }
  ngAfterViewInit(){
    //獲取到頁面的dom元素divEle
    let divEle = this.elementref.nativeElement.querySelector('div');
    console.dir(divEle);
  }
}

3.ViewChild

改變dom元素背景顏色

import { Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <div #greet>666</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('greet')
  greetDiv: ElementRef;

  ngAfterViewInit(){
    //this.greetDiv即頁面中的#greet
    this.greetDiv.nativeElement.style.background='red';
  }
}

4.通過 renderer 物件提供的 API改進

import { Component, ElementRef, ViewChild, Renderer2} from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <div #greet>666</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private renderer: Renderer2){

  }

  @ViewChild('greet')
  greetDiv: ElementRef;

  ngAfterViewInit(){
    this.renderer.setStyle(this.greetDiv.nativeElement,'background','red');
  }
}

參考–Angular 4.x 修仙之路