10

コンポーネントまたはロードしたいコンポーネントのhtmlセレクターのいずれかを含むことができるjson配列があります。このデータを for ループ内にロードしようとしています。値 {{d.html}} を補間しようとすると、プラン テキストとして表示されます。以下の innerHTML アプローチを使用して dom を検査すると、そこに html が表示されますが、カスタム コンポーネントとして動作しません (dom は、初期化してコンポーネント テンプレートに置き換える代わりに、単に含まれます。

ダイナミック コンテンツ ローダーを見てみましたが、うまく収まりません。これは for ループ内にあるため、テンプレート構文を使用できないため、loadIntoLocation は機能しません。また、コンポーネントに入力があった場合にどのように機能するかわかりません。

<div *ngFor="#d of dtabs" class="tab-pane" id="tab-{{d.component}}">
  <div [innerHTML]="d.html"></div>
</div>
4

2 に答える 2

3

Angular2 動的レンダリング テンプレート

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {bootstrap}    from 'angular2/platform/browser'

@Component({
    selector: 'some-component',
    properties: ['greeting'],
    template: `
    <b>{{ greeting }}</b>
  `
})
class SomeComponent { }

@Component({
    selector: 'app'
})
@View({
    template: `
    <h1>Before container</h1>
    <div #container></div>
    <h2>After container</h2>
  `
})
class App {
    loader: DynamicComponentLoader;
    elementRef: ElementRef;

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
        this.laoder = loader;
        this.elementRef = elementRef;

        // Some async action (maybe ajax response with html in it)
        setTimeout(() => this.renderTemplate(`
      <div>
    <h2>Hello</h2>
    <some-component greeting="Oh, hey"></some-component>
      </div>
    `, [SomeComponent]), 1000);
    }

    renderTemplate(template, directives) {
        this.laoder.loadIntoLocation(
            toComponent(template, directives),
            this.elementRef,
            'container'
        )
    }
}

function toComponent(template, directives = []) {
    @Component({ selector: 'fake-component' })
    @View({ template, directives })
    class FakeComponent { }

    return FakeComponent;
}


bootstrap(App);

完全なコード: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template

于 2016-02-19T01:57:37.653 に答える