Как использовать Custom Renderer в Angular2

Question

Я совершенно новый для Angular, и я борюсь со следующей проблемой.

Я хотел бы отобразить содержимое шаблонов компонентов в DOM. Цель состоит в том, чтобы создать стилеуид, где я хочу показать фрагменты кода из шаблонов. Поэтому мне нужен экранированный шаблон-контент.

Я пробовал несколько вещей и придумал возможное решение для создания настраиваемого средства визуализации, которое ускользает от вывода шаблона.

Я думал, что это может быть так просто, как описано здесь: Rendering in Angular Но ... это не так.

Я создал, как описано здесь, Stack Overflow - custom-renderer-for-angular2 пользовательский рендерер, который должен в первую очередь функционировать, как и DebugDomRenderer по умолчанию. Но я не знаю, как использовать этот рендерер.

Я пытался что-то вроде:

import {Component} from '@angular/core'; 
import {EscapeRootRenderer} from "../../renderer/escapeRootRenderer"; 
import {DebugDomRootRenderer} from "@angular/core/src/debug/debug_renderer"; 

@Component({ 
    selector:'escape', 
    template:'<pre><code><ng-content></ng-content></code></pre>', 
    providers:[ 
    {provide: DebugDomRootRenderer, useClass:EscapeRootRenderer} 
    ] 
}) 

export class EscapeComponent{ 

} 

Эта часть еще не готова. Мой план взять ChildViews и сделать их убежали ...

Мой EscapeRootRender делает то же самое, что и DebugDomRootRenderer за исключением того, что я удалил отладки вещи и добавлены некоторые console.logs()

import {Injectable, RenderComponentType, Renderer, RootRenderer} from '@angular/core'; 

import {AnimationStyles} from "@angular/core/esm/src/animation/animation_styles"; 
import {AnimationKeyframe} from "@angular/core/esm/src/animation/animation_keyframe"; 


@Injectable() 
export class EscapeRootRenderer implements RootRenderer { 

    constructor(private _delegate:RootRenderer) { 
    console.log('EscapeRootRenderer constructed') 
    console.log(_delegate) 
    } 


    renderComponent(componentProto: RenderComponentType): EscapeRenderer { 
    console.log('EscapeRootRenderer - renderComponent'); 
    return new EscapeRenderer(this._delegate.renderComponent(componentProto)); 
    } 

} 

export class EscapeRenderer implements Renderer{ 

    constructor( private _delegate: Renderer){ 
    console.log('EscapeRenderer constructed'); 
    } 

    animate(element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[], duration: number, delay: number, easing: string): any { 
    console.log('EscapeRenderer animate'); 
    return this._delegate.animate(element, startingStyles, keyframes, duration, delay, easing); 
    } 

    selectRootElement(selector: string): any { 
    console.log('EscapeRenderer selectRootElement'); 
    var nativeEl = this._delegate.selectRootElement(selector); 
    return nativeEl; 
    } 

    createElement(parentElement: any, name: string): any { 
    console.log('EscapeRenderer createElement'); 
    var nativeEl = this._delegate.createElement(parentElement, name); 
    return nativeEl; 
    } 

    createViewRoot(hostElement: any): any { 
    console.log('EscapeRenderer createViewRoot'); 
    return this._delegate.createViewRoot(hostElement); } 

    createTemplateAnchor(parentElement: any): any { 
    console.log('EscapeRenderer createTemplateAnchor'); 
    var comment = this._delegate.createTemplateAnchor(parentElement); 
    return comment; 
    } 

    createText(parentElement: any, value: string): any { 
    console.log('EscapeRenderer createText'); 
    var text = this._delegate.createText(parentElement, value); 
    return text; 
    } 

    projectNodes(parentElement: any, nodes: any[]) { 
    console.log('EscapeRenderer projectNodes'); 
    return this._delegate.projectNodes(parentElement, nodes); 
    } 

    attachViewAfter(node: any, viewRootNodes: any[]) { 
    console.log('EscapeRenderer attachViewAfter'); 
    return this._delegate.attachViewAfter(node, viewRootNodes); 
    } 

    detachView(viewRootNodes: any[]) { 
    console.log('EscapeRenderer detachView'); 
    return this._delegate.detachView(viewRootNodes); 
    } 

    destroyView(hostElement: any, viewAllNodes: any[]) { 
    console.log('EscapeRenderer destroyView'); 
    return this._delegate.destroyView(hostElement, viewAllNodes); 
    } 

    listen(renderElement: any, name: string, callback: Function) { 
    console.log('EscapeRenderer listen'); 
    return this._delegate.listen(renderElement, name, callback); 
    } 

    listenGlobal(target: string, name: string, callback: Function): Function { 
    console.log('EscapeRenderer listenGlobal'); 
    return this._delegate.listenGlobal(target, name, callback); 
    } 

    setElementProperty(renderElement: any, propertyName: string, propertyValue: any) { 
    console.log('EscapeRenderer setElementProperty'); 
    return this._delegate.setElementProperty(renderElement, propertyName, propertyValue); 
    } 

    setElementAttribute(renderElement: any, attributeName: string, attributeValue: string) { 
    console.log('EscapeRenderer setElementAttribute'); 
    return this._delegate.setElementAttribute(renderElement, attributeName, attributeValue); 
    } 

    /** 
    * Used only in debug mode to serialize property changes to comment nodes, 
    * such as <template> placeholders. 
    */ 
    setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string) { 
    console.log('EscapeRenderer setBindingDebugInfo'); 
    return this._delegate.setBindingDebugInfo(renderElement, propertyName, propertyValue); 
    } 


    setElementClass(renderElement: any, className: string, isAdd: boolean) { 
    console.log('EscapeRenderer setElementClass'); 
    return this._delegate.setElementClass(renderElement, className, isAdd); 
    } 

    setElementStyle(renderElement: any, styleName: string, styleValue: string) { 
    console.log('EscapeRenderer setElementStyle'); 
    return this._delegate.setElementStyle(renderElement, styleName, styleValue); 
    } 

    invokeElementMethod(renderElement: any, methodName: string, args: any[]) { 
    console.log('EscapeRenderer invokeElementMethod'); 
    return this._delegate.invokeElementMethod(renderElement, methodName, args); 
    } 

    setText(renderNode: any, text: string) { 
    console.log('EscapeRenderer setText'); 
    return this._delegate.setText(renderNode, text); } 

} 

Теперь на вопрос (и):

1. Это (customRenderer) способ справиться с проблемой экранирования шаблона-контента, или я совершенно не прав?
2. Как я могу указать один компонент для использования другого Renderer?

Спасибо за помощь,

лучший Jan

Answer 1

Я решить мою проблему без Custom-видеообработки:

import { 
    Component, ViewChild, OnInit, AfterViewInit, OnInit 
} from '@angular/core'; 


@Component({ 
    selector:'escape', 
    template:'<content #kiddo><ng-content></ng-content></content><pre><code #codeContent>{{componentInnerHTML}}</code></pre>' 
}) 

export class EscapeComponent implements OnInit, AfterViewInit{ 
    @ViewChild('kiddo') viewChild; 
    @ViewChild('codeContent') codeContent; 
    componentInnerHTML:string; 

    ngAfterViewInit(){ 
    this.componentInnerHTML = this.viewChild.nativeElement.innerHTML; 
    } 

    ngOnInit(){ 
    var that = this; 
    setTimeout(()=>hljs.highlightBlock(that.codeContent.nativeElement), 1) 
    } 
} 

Результат выглядит сейчас, как это. Разработчики теперь могут просто скопировать код прямо с сайта ...

Screenshot output EscapeComponent

Но я по-прежнему заинтересован в том, как я могу использовать пользовательский-рендерер.

Answer 2

я до сих пор не в полной мере понять вопрос, но, возможно, это делает то, что вы хотите

<pre ngNonBindable> 
    template content here 
</pre>