角度4のユニバーサルレンダラーを広げる

Question

私は誰かがこの上のロジックを助けることを願っています。 角度ユニバーサルが各コンポーネントのスタイルを挿入する方法を変更したいと思います。 レンダラーを拡張する方法を知っている人は、他の場所からスタイルシートを取得するには、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); 
    } 
} 

Answer 1

あなたはDynamically import a stylesheet depending on the environmentのための問題を見てすることができます。 hereのガイドなどの動的コンポーネントを追加します

• ：だから私はあなたのことで、ダイナミックなスタイルをロードしようとすることができると思います。

• またはASドキュメントオブジェクトを経由してスタイルを適用します。ここでは

  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上の簡単な例です。

このヘルプが必要です。