![](/img/trans.png)
[英]Angular Universal and ElementRef/Renderer2.createElement
[英]Extending Angular 4 universal renderer
我希望有人可以对此逻辑提供帮助。 我想修改角度通用为每个组件注入样式的方式。 有谁知道如何通过执行api请求来扩展渲染器并从其他地方获取样式表。 我只需要一个关于渲染器示例和api请求的示例,我想我自己就能弄清楚。
我正在看这个旧的。 https://github.com/ralfstx/angular2-renderer-example/blob/master/src/custom-renderer.ts
import {
Injectable,
Renderer,
RootRenderer,
RenderComponentType
} from '@angular/core';
export class Element {
constructor(private nodeName: string, private parent?: Element) {
}
toString() {
return '<' + this.nodeName + '>';
}
};
@Injectable()
export class CustomRootRenderer extends RootRenderer {
private _registeredComponents: Map<string, CustomRenderer> = new Map<string, CustomRenderer>();
renderComponent(componentProto: RenderComponentType): Renderer {
var renderer = this._registeredComponents.get(componentProto.id);
if (!renderer) {
renderer = new CustomRenderer(this);
this._registeredComponents.set(componentProto.id, renderer);
}
return renderer;
}
}
@Injectable()
export class CustomRenderer extends Renderer {
constructor(private _rootRenderer: CustomRootRenderer) {
super();
console.log('CustomRenderer created');
}
renderComponent(componentType: RenderComponentType): Renderer {
return this._rootRenderer.renderComponent(componentType);
}
selectRootElement(selector: string): Element {
console.log('selectRootElement', selector);
return new Element('Root');
}
createElement(parentElement: Element, name: string): Element {
console.log('createElement', 'parent: ' + parentElement, 'name: ' + name);
return new Element(name, parentElement);
}
createViewRoot(hostElement: Element): Element {
console.log('createViewRoot', 'host: ' + hostElement);
return hostElement;
}
createTemplateAnchor(parentElement: Element): Element {
console.log('createTemplateAnchor', 'parent: ' + parentElement);
return new Element('?');
}
createText(parentElement: Element, value: string): Element {
console.log('createText', 'parent: ' + parentElement, 'value: ' + value);
return new Element('text');
}
projectNodes(parentElement: Element, nodes: Element[]) {
console.log('projectNodes', 'parent: ' + parentElement, 'nodes: ' + nodes.map(node => node.toString()));
}
attachViewAfter(node: Element, viewRootNodes: Element[]) {
console.log('attachViewAfter', 'node: ' + node, 'viewRootNodes: ' + viewRootNodes.map(node => node.toString()));
}
detachView(viewRootNodes: Element[]) {
console.log('detachView', 'viewRootNodes: ' + viewRootNodes.map(node => node.toString()));
}
destroyView(hostElement: Element, viewAllNodes: Element[]) {
console.log('destroyView', 'host: ' + hostElement, 'viewAllNodes: ' + viewAllNodes.map(node => node.toString()));
}
setElementProperty(renderElement: Element, propertyName: string, propertyValue: any): void {
console.log('setElementProperty', 'element: ' + renderElement, 'name: ' + propertyName, 'value: ' + propertyValue);
}
setElementAttribute(renderElement: Element, attributeName: string, attributeValue: string): void {
console.log('setElementAttribute', 'element: ' + renderElement, 'name: ' + attributeName, 'value: ' + attributeValue);
return this.setElementProperty(renderElement, attributeName, attributeValue);
}
listen(renderElement: Element, eventName: string, callback: Function): Function {
console.log('listen', 'element: ' + renderElement, 'eventName: ' + eventName);
return function () { };
}
listenGlobal(target: string, eventName: string, callback: Function): Function {
console.log('listen', 'target: ' + target, 'eventName: ' + eventName);
return function () { };
}
// Used only in debug mode to serialize property changes to comment nodes,
// such as <template> placeholders.
setBindingDebugInfo(renderElement: Element, propertyName: string, propertyValue: string): void {
console.log('setBindingDebugInfo', 'element: ' + renderElement, 'name: ' + propertyName, 'value: ' + propertyValue);
}
setElementClass(renderElement: Element, className: string, isAdd: boolean): void {
console.log('setElementClass', 'className' + className, 'isAdd: ' + isAdd);
}
setElementStyle(renderElement: Element, styleName: string, styleValue: string): void {
console.log('setElementStyle', 'name: ' + styleName, 'value: ' + styleValue);
}
invokeElementMethod(renderElement: Element, methodName: string, args: Array<any>) {
console.log('invokeElementMethod', 'name: ' + methodName, 'args: ' + args);
}
setText(renderNode: Element, text: string): void {
console.log('setText', 'node: ' + renderNode, 'text: ' + text);
}
}
您可以查看有关根据环境动态导入样式表的问题 。 因此,我认为您可以尝试通过以下方式加载动态样式:
或通过文档对象应用样式为:
export class AppComponent { title = 'Dynamic load theme'; constructor (@Inject(DOCUMENT) private document) { } lightTheme() { this.document.getElementById('theme').setAttribute('href', 'light-theme.css'); } darkTheme() { this.document.getElementById('theme').setAttribute('href', 'dark-theme.css'); } }
这是关于Plunker的一个简单示例。
希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.