在上一篇 @ViewChild && template #refs && ElementRef 提到如何使用 ElementRef 取得 dom element 並對其操作。
但如果你的程式是跨平台的話, 那就要用 Renderer
一樣要先取得 ElementRef
1
| @ViewChild('email') email: ElementRef;
|
在 constructor 注入 Renderer
1
2
3
4
| constructor(
private renderer: Renderer,
private cd: ChangeDetectorRef
) {}
|
改使用 Renderer 的方法
1
2
3
4
5
6
7
8
| ngAfterViewInit() {
this.renderer.setElementAttribute(this.email.nativeElement, 'placeholder', 'Enter your email address');
this.renderer.setElementClass(this.email.nativeElement, 'email', true);
this.renderer.invokeElementMethod(this.email.nativeElement, 'focus');
}
|
即可以達到之前一樣的效果, 使用 Renderer 也可以避免直接操作 dom
Result
Reference
