有没有办法获得Angular *组件的HTML模板？

发布时间：2020-12-17 07:53:30 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个共享Angular组件库,以便在许多不同的Web项目中使用.与共享组件库一起,我正在尝试创建一个Web项目,其中包含并显示所有这些组件以及如何使用它们的代码示例. 从与类似问题相关的其他查询中可以看出,为了在 pre中的网页中显示HTML代码.或 cod

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

从与类似问题相关的其他查询中可以看出,为了在< pre>中的网页中显示HTML代码.或< code>标签,那些HTML片段的某些方面需要具有HTML编码的字符(即,>需要& gt;,<需要& lt;).需要从源代码手动进行这些更改可能非常繁琐且乏味. 我想找到一种方法来读取给定组件的HTML模板,进行所需的几个文本替换,然后将该值设置为要在视图中显示的属性.我已经看到其他类似的SO问题有不同的答案,例如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,其内容如下：

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中,供下一个开发人员查看和理解如何利用该类型组件的实际渲染元素,以及显示组件在实际应用程序中使用时的外观.

我不能找出如何工作DisplayFooComponent的部分是此行this.encodedExampleHtml =新FooComponent()template.replace.( ‘<’,‘&安培; LT;’)代替( ‘>’,’& gt;’);把它当作我想要做的伪代码,因为Angular组件对象没有模板属性,并且我看不到暴露该组件模板的属性.

有没有办法利用Angular框架来获取组件的HTML模板？我再次不希望替换表达式的插值内容,而是由装饰者的模板属性或其templateUrl属性与元素相关联的实际原始HTML模板？

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

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

也可以看看

> When and how s decorator applied to the decorated classes from the @angular packages
> Read and List all exports of an angular module
> Example of how angular parses template

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!