Angularjs 如何在Angular2中使用自定义渲染器

我是个新手，我很难解决以下问题

我希望在DOM中呈现组件模板的内容。目标是生成一个样式指南，我想在其中显示模板的代码片段。因此，我需要转义模板内容

我尝试了几种方法，并提出了一种可能的解决方案来创建一个自定义渲染器，该渲染器可以逃逸模板输出

我想这可能和这里描述的一样简单： 但是事实并非如此

我在这里创建了一个自定义渲染器，它首先应该像默认的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{

}

从'@angular/core'导入{Component}；
从“./../renderer/EscapeRootRenderer”导入{EscapeRootRenderer}”；
从“@angular/core/src/debug/debug_renderer”导入{debugdomrootdrenderer}”；
@组成部分({
选择器：'escape'，
模板：“
”，
供应商：[
{提供：DebugDomRootRenderer，useClass:EscapeRootRenderer}
]
})
导出类EscapeComponent{
}

这部分还没有准备好。我的计划是带上ChildViews并让他们逃跑

我的EscapeRootRender与的功能完全相同，只是我删除了调试内容并添加了一些console.logs（）

import{Injectable，RenderComponentType，Renderer，RootRenderer}来自“@angular/core”；
从“@angular/core/esm/src/animation/animation_styles”导入{AnimationStyles}”；
从“@angular/core/esm/src/animation/animation_keyframe”导入{AnimationKeyframe}”；
@可注射（）
导出类EscapeRootRenderer实现RootRenderer{
构造函数（私有_委托：RootRenderer）{
console.log（'escaperotrotrender'构造）
console.log（_委托）
}
renderComponent（componentProto:RenderComponentType）：转义符{
log（'escaperotrotrender-renderComponent'）；
返回新的EscapeRenderer（this._delegate.renderComponent（componentProto））；
}
}
导出类转义器实现渲染器{
构造函数（私有委托：呈现器）{
log（'EscapeRenderer-constructed'）；
}
设置动画（元素：任意，开始样式：animationstyle，关键帧：AnimationKeyframe[]，持续时间：数字，延迟：数字，缓和：字符串）：任意{
log（'EscapeRenderer animate'）；
返回此。\u委托.动画（元素、开始样式、关键帧、持续时间、延迟、缓和）；
}
selectRootElement（选择器：字符串）：任意{
log（'EscapeRenderer selectRootElement'）；
var nativeEl=this.\u delegate.selectRootElement（选择器）；
返回nativeEl；
}
createElement（parentElement:any，name:string）：any{
log（'EscapeRenderer createElement'）；
var nativeEl=this.\u delegate.createElement（parentElement，name）；
返回nativeEl；
}
createViewRoot（hostElement:any）：any{
log（'EscapeRenderer createViewRoot'）；
返回此项。_delegate.createViewRoot（hostElement）；}
createTemplateAnchor（parentElement:any）：any{
log（'EscapeRenderer createTemplateAnchor'）；
var comment=this.\u delegate.createTemplateAnchor（parentElement）；
回复评论；
}
createText（parentElement:any，value:string）：any{
log（'EscapeRenderer createText'）；
var text=this.\u delegate.createText（parentElement，value）；
返回文本；
}
projectNodes（父元素：任意，节点：任意[]）{
log（'EscapeRenderer projectNodes'）；
返回此.\u delegate.projectNodes（parentElement，nodes）；
}
attachViewAfter（节点：任意，viewRootNodes:任意[]）{
log（'EscapeRenderer attachViewAfter'）；
返回此。\u delegate.attachViewAfter（节点，viewRootNodes）；
}
detachView（viewRootNodes:任意[]）{
log（'escaperender detachView'）；
返回此。_delegate.detachView（viewRootNodes）；
}
destroyView（hostElement:any，viewAllNodes:any[]）{
log（'EscapeRenderer destroyView'）；
返回此._delegate.destronView（hostElement，viewAllNodes）；
}
侦听（renderElement:any，name:string，callback:Function）{
log（'EscapeRenderer listen'）；
返回此。_delegate.listen（渲染、名称、回调）；
}
listenGlobal（目标：字符串，名称：字符串，回调：函数）：函数{
log（'EscapeRenderer listenGlobal'）；
返回此._delegate.listenGlobal（目标、名称、回调）；
}
setElementProperty（renderElement:any，propertyName:string，propertyValue:any）{
log（'EscapeRenderer setElementProperty'）；
返回此.u delegate.setElementProperty（renderElement、propertyName、propertyValue）；
}
setElementAttribute（renderElement:any、attributeName:string、attributeValue:string）{
log（'EscapeRenderer setElementAttribute'）；
返回此属性。_delegate.setElementAttribute（renderElement、attributeName、attributeValue）；
}
/**
*仅在调试模式下用于将属性更改序列化到注释节点，
*例如占位符。
*/
setBindingDebugInfo（RenderRelation:any，propertyName:string，propertyValue:string）{
log（'EscapeRenderer setBindingDebugInfo'）；
返回此参数。\u delegate.setBindingDebugInfo（RenderRelation、propertyName、propertyValue）；
}
setElementClass（renderElement:any，className:string，isAdd:boolean）{
log（'EscapeRenderer setElementClass'）；
返回此._delegate.setElementClass（渲染、类名、isAdd）；
}
setElementStyle（renderElement:any，styleName:string，styleValue:string）{
log（'EscapeRenderer setElementStyle'）；
返回此值。_delegate.setElementStyle（renderElement、styleName、styleValue）；
}
invokeElementMethod（renderElement:any，methodName:string，args:any[]）{
log（'EscapeRenderer invokeElementMethod'）；
返回此._delegate.invokeElementMethod（renderElement，methodName，args）；
}
setText（renderNode:any，text:string）{
log（'EscapeRenderer setText'）；
返回此.u delegate.setText（renderNode，text）；
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); }

}

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)
  }
}

<pre ngNonBindable>
    template content here
</pre>