Angular Renderer (渲染器)
什么是渲染器
渲染器是 Angular 为我们提供的一种内置服务,用于执行 UI 渲染操作。在浏览器中,渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其它的数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素,这些页面元素内部使用 DOM (Document Object Model) 来表示。
Angular Renderer
- RootRenderer
export abstract class RootRenderer {
abstract renderComponent(componentType: RenderComponentType): Renderer;
}
- Renderer
/**
* @deprecated Use the `Renderer2` instead.
*/
export abstract class Renderer {
abstract createElement(parentElement: any, name: string,
debugInfo?: RenderDebugInfo): any;
abstract createText(parentElement: any, value: string,
debugInfo?: RenderDebugInfo): any;
abstract listen(renderElement: any, name: string, callback: Function): Function;
abstract listenGlobal(target: string, name: string, callback: Function): Function;
abstract setElementProperty(renderElement: any, propertyName: string, propertyValue:
any): void;
abstract setElementAttribute(renderElement: any, attributeName: string,
attributeValue: string): void;
// ...
}
- Renderer2
export abstract class Renderer2 {
abstract createElement(name: string, namespace?: string|null): any;
abstract createComment(value: string): any;
abstract createText(value: string): any;
abstract setAttribute(el: any, name: string, value: string,
namespace?: string|null): void;
abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
abstract addClass(el: any, name: string): void;
abstract removeClass(el: any, name: string): void;
abstract setStyle(el: any, style: string, value: any,
flags?: RendererStyleFlags2): void;
abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
abstract setProperty(el: any, name: string, value: any): void;
abstract setValue(node: any, value: string): void;
abstract listen(
target: 'window'|'document'|'body'|any, eventName: string,
callback: (event: any) => boolean | void): () => void;
}
需要注意的是在 Angular 6 版本,我们使用
Renderer2
替代Renderer
。通过观察Renderer
相关的抽象类 (Renderer
、Renderer2
),我们发现抽象类中定义了很多抽象方法,用来创建元素、文本、设置属性、添加样式和设置事件监听等。
使用 Renderer
@Component({
selector: 'exe-renderer',
template: `
<h3>Renderer Component</h3>
`
})
export class ExeComponent {
constructor(private renderer: Renderer2, el: ElementRef) {
this.renderer.setProperty(el.nativeElement, 'author', 'danwang');
}
}
以上代码中,我们利用构造注入的方式,注入 Renderer2
和 ElementRef
实例。
实例
在开发中,我们都比较喜欢用jQuery,因为jQuery操作dom很方便,现在用Renderer2
来创建方法也可以很方便的操作DOM
- 一个给angular中组件移除
class
的方法
private removeClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
for (const i in classMap) {
if (classMap.hasOwnProperty(i)) {
renderer.removeClass(el, i);
}
}
}
- 添加
class
方法
private addClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
for (const i in classMap) {
if (classMap.hasOwnProperty(i)) {
if (classMap[ i ]) {
renderer.addClass(el, i);
}
}
}
}