विस्तारक कोणीय 4 सार्वभौमिक रेंडरर

Question

मुझे आशा है कि कोई इस पर तर्क के साथ मदद कर सकता है। मैं कोणीय सार्वभौमिक प्रत्येक घटक के लिए शैली इंजेक्ट करने के तरीके को संशोधित करना चाहता हूं। क्या कोई जानता है कि रेंडरर को कैसे विस्तारित किया जाए, एक एपीआई अनुरोध करके स्टाइलशीट को अन्य जगह से प्राप्त करें। मुझे केवल रेंडरर उदाहरण और एपीआई अनुरोध पर एक उदाहरण की आवश्यकता होगी, मुझे लगता है कि मैं खुद को समझ सकता हूं।

मैं इस पुराने को देख रहा हूं। 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 पर एक सरल उदाहरण है।

आशा इस मदद!