有没有办法获取Angular *组件的HTML模板? [英] Is there a way to get the HTML template for an Angular* component?

问题描述

我正在尝试创建一个共享的Angular组件库，以在许多不同的Web项目中使用.与共享的组件库一起，我试图创建一个Web项目，其中包含并显示所有这些组件以及有关如何使用它们的代码示例.

I'm trying to create a library of shared Angular components to use across a number of different web projects. Along with the shared component library, I'm trying to create a web project that contains and displays all of those components and code examples as to how to use them.

从与类似问题相关的其他查询中可以看出，为了在<pre>或<code>标签中在网页中显示HTML代码，这些HTML代码段的某些方面需要具有HTML编码的字符(即必须为>，<必须为<).从源代码手动进行这些更改的需求可能非常繁琐而繁琐.

As seen from other queries related to a similar question, in order to display HTML code in a webpage in in <pre> or <code> tags, certain aspects of those HTML snippets need to have HTML encoded characters(i.e. > needs to be >, < needs to be <). The need to make these changes by hand from the source code can be quite onerous and tedious.

我想找到一种方法，能够读取给定组件的HTML模板，进行少量的文本替换，然后将该值设置为要在视图中显示的属性.我见过其他类似的SO问题，它们的答案不同而又不足，例如

I would like to find a way to be able to read the HTML template for a given component, make the few text replacements needed and then set that value to a property to be displayed in the view. I've seen other similar SO questions that have a different and insufficient answer such as this.

如果我的foo.component.ts如下:

import { Component } from '@angular/core';

@Component({
    selector: 'foo',
    template: `
        <div class="foo">
            <div class="content">
                <ng-content select="[top-content]"></ng-content>
            </div>
            <div class="extra content">
                <ng-content select="[bottom-content]"></ng-content>
            </div>
        </div>
    `
})
export class FooComponent {}

我想用以下内容创建一个display-foo.component.ts:

I want to create a display-foo.component.ts with something as follows:

import { Component } from '@angular/core';
import { FooComponent } from './foo.component';

@Component({
    selector: 'display-foo',
    template: `
        <pre class="example-code">
          <code>
            {{encodedExampleHtml}}
          </code>
        </pre>
        <foo>
          <div top-content>TOP</div>
          <div bottom-content>BOTTOM</div>
        </foo>
    `
})
export class DisplayFooComponent {
  encodedExampleHtml: string;

  constructor() {
    this.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;');
  }
}

从本质上讲，这会将模板放在UI中，供下一个开发人员查看和了解如何利用该类型组件的实际呈现元素以及显示该组件在实际中使用时的外观.应用程序.

In essence this would put the template in the UI for the next developer to see and understand how to utilize as well as an actual rendered element of that type of component as well displaying what the component would look like when used in an actual application.

我无法弄清楚DisplayFooComponent的部分是这行this.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;');将其作为我想做的事情的伪代码，因为Angular组件对象没有模板属性，并且我看不到公开该组件模板的属性.

The part of the DisplayFooComponent that I can't figure out how to work is this line this.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;'); Take that as pseudocode for what I would like to do because an Angular component object has no template property and as far as I can see no property that exposes the template for that component.

有没有一种方法可以利用Angular框架获取组件的HTML模板?同样，我也不想插入的内容替换为表达式，而是要关联的实际原始HTML模板通过装饰器的template属性或其templateUrl属性添加元素?

Is there a way to utilize the Angular framework to get the HTML template for a component? Again I don't want the interpolated content with expressions replaced, but the actual raw HTML template that is associated with an element either by the decorator's template property or its templateUrl property?

推荐答案

您可以尝试使用特殊功能来获取注释:

You can try using special function to get annotations:

annotation.ts

declare let Reflect: any;
export function getAnnotation(typeOrFunc: Type<any>): any[]|null {
  // Prefer the direct API.
  if ((<any>typeOrFunc).annotations) {
    let annotations = (<any>typeOrFunc).annotations;
    if (typeof annotations === 'function' && annotations.annotations) {
      annotations = annotations.annotations;
    }
    return annotations[0];
  }

  // API of tsickle for lowering decorators to properties on the class.
  if ((<any>typeOrFunc).decorators) {
    return convertTsickleDecoratorIntoMetadata((<any>typeOrFunc).decorators)[0];
  }

  // API for metadata created by invoking the decorators.
  if (Reflect && Reflect.getOwnMetadata) {
    return Reflect.getOwnMetadata('annotations', typeOrFunc)[0];
  }
  return null;
}

function convertTsickleDecoratorIntoMetadata(decoratorInvocations: any[]): any[] {
  if (!decoratorInvocations) {
    return [];
  }
  return decoratorInvocations.map(decoratorInvocation => {
    const decoratorType = decoratorInvocation.type;
    const annotationCls = decoratorType.annotationCls;
    const annotationArgs = decoratorInvocation.args ? decoratorInvocation.args : [];
    return new annotationCls(...annotationArgs);
  });
}

然后

this.encodedExampleHtml = getAnnotation(FooComponent).template;

柱塞示例

Plunker Example

另请参见

• 何时以及s装饰器如何应用于@angular包中的装饰类

• 读取并列出所有角钢出口模块

角度解析模板的示例

这篇关于有没有办法获取Angular *组件的HTML模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！