Расширение универсального рендеринга Angular 4

Надеюсь, кто-то может помочь с логикой на этом. Я хотел бы изменить способ, которым angular универсальный вводит стиль для каждого компонента. Кто-нибудь знает, как расширить рендер, получить таблицу стилей из другого места, выполнив запрос 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);
    }
}

Ответы

Ответ 1

Вы можете взглянуть на проблему для Динамически импортировать таблицу стилей в зависимости от среды. Поэтому я думаю, вы можете попробовать загрузить динамический стиль:

  • Добавить динамический компонент в качестве руководства в здесь.

  • Или применять стили через объект документа как:

    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.

Надеюсь на эту помощь!