Angular *コンポーネントのHTMLテンプレートを取得する方法はありますか？

Question

私は、いくつかの異なるWebプロジェクトで使用する共有されたAngularコンポーネントのライブラリを作成しようとしています。共有コンポーネントライブラリに加えて、これらのコンポーネントをすべて含んでいるWebプロジェクトを作成しようとしています。それらのコンポーネントの使用方法に関するコード例があります。同様の質問に関連する他のクエリから分かるように

、<pre>または<code>タグ内のWebページにHTMLコードを表示するために、これらのHTMLスニペットの特定の側面が>にする必要がある> HTMLエンコードされた文字（すなわちを持っている必要があります<が<である必要があります）。これらの変更を手作業でソースコードから行う必要は、非常に面倒で退屈なものになります。

私は、特定のコンポーネントのHTMLテンプレートを読み、必要なテキストをいくつか置き換えて、その値をビューに表示するプロパティに設定する方法を見つけたいと思います。私はthisのように、答えが不十分で違う他の類似の質問を見たことがあります。

次のように私は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にテンプレートを置く次のように

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を作成したいですそのタイプのコンポーネントの実際のレンダリングされた要素をどのように活用するかを理解し、実際のアプリケーションで使用されたときにそのコンポーネントがどのように見えるかを表示します。

作業の仕方が分からない部分はこの行ですthis.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;');角型コンポーネントオブジェクトにはテンプレートプロパティがなく、私が見る限りでは何をしたいのですかそのコンポーネントのテンプレートを公開するプロパティはありません。

Angularフレームワークを使用してコンポーネントのHTMLテンプレートを取得する方法はありますか？もう一度式を置き換えて補間されたコンテンツは必要ありませんが、デコレータのtemplateプロパティまたはtemplateUrlプロパティのいずれかによって要素に関連付けられた実際の生のHTMLテンプレートは必要ですか？

Answer 1

あなたは注釈を取得するために特別な機能を使用して試すことができます：

注釈を。また

• When and how s decorator applied to the decorated classes from the @angular packages
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

参照してください。

• Read and List all exports of an angular module

• Example of how angular parses template

Answer 2

角度4.4.2のためではなく、5.0.2のために正常に動作yurzui's answer。アノテーションメカニズムが変更されました。Reflect.defineMetadata（）ではなくプロパティがメタデータを格納するために使用されます。それは文書化されていないので、一つだけのコードでそれを見つけることができる：角度4.4.2（@angular/core/@angular/core.js、l.356）で

const /** @type {?} */ TypeDecorator = (function TypeDecorator(cls) { 
    const /** @type {?} */ annotations = Reflect.getOwnMetadata('annotations', cls) || []; 
    annotations.push(annotationInstance); 
    Reflect.defineMetadata('annotations', annotations, cls); 
    return cls; 
}); 

角度5.0.2（@angular/core/esm2015/core.js、Lで

const ANNOTATIONS = '__annotations__'; 
const /** @type {?} */ TypeDecorator = /** @type {?} */ (function TypeDecorator(cls) { 
    // Use of Object.defineProperty is important since it creates non-enumerable property which 
    // prevents the property is copied during subclassing. 
    const /** @type {?} */ annotations = cls.hasOwnProperty(ANNOTATIONS) ? 
     (/** @type {?} */ (cls))[ANNOTATIONS] : 
     Object.defineProperty(cls, ANNOTATIONS, { value: [] })[ANNOTATIONS]; 
    annotations.push(annotationInstance); 
    return cls; 
}); 

に96）。

メタデータにアクセスするためのコードが更新されました。テンプレート：

import 'reflect-metadata'; 

export function getAnnotation(typeOrFunc: Type<any>): any[]|null { 
    // Prefer the direct API. 
    if ((<any>typeOrFunc)['__annotations__']) { 
     return (<any>typeOrFunc)['__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); 
    }); 
}