一、@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');
}
}