angular学习(@Injectable() +AfterViewInit+ElementRef+ViewChild+Renderer)

本文链接：https://blog.youkuaiyun.com/kikyou_csdn/article/details/81944365

本文介绍了Angular中的关键概念：@Injectable()用于服务的依赖注入，AfterViewInit接口用于组件视图初始化后的操作，以及如何结合ElementRef、ViewChild和Renderer来操作DOM元素。通过具体的例子和参考，读者可以更好地理解这些核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、@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 修仙之路