각도 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에 추가하십시오. 문서 객체를 통해

• 또는 적용 스타일로 : 여기

  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에 대한 간단한 예입니다.

희망이 도움이됩니다.