47

次のようにAppComponentangular-cliを含むプロジェクトを作成しました。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

そしてapp.component.htmlとして

<h1>
  Good Morning, {{title}}
</h1>

したがって、ビルドすると、次のようなコードを含むこの./dist/main.bundle.jsng buildのようなファイルが生成されます-

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

つまり、ビルド時にコンパイラ/bundle-er は html ファイルを読み取り、それらを生成された js ファイルに連結します。

しかし、私の場合、html も動的で、サーバー側からのコンテンツ駆動型です。たとえば、html の代わりに、私のテンプレート ファイルはapp.component.jspであり、まったく別のサーバーまたはフォルダーに存在するとします。

また、その JSP ファイルが返されることもあれば、現在のサーバー時間に応じて返さ<h1>Good Morning, {{title}}</h1> れることもあります。<h1>Good Afternoon, {{title}}</h1>

この機能を実現するにはどうすればよいですか?

私が理解しているのは、ある種のローダー関数を定義する必要があるということです:loadDynamicTemplate(template_url)

Component デコレータ テンプレート プロパティでそのローダー関数を使用する必要があります。その場合、main.bundle.JS が生成されると、その関数も使用されます。そのため、実行時に angular はこの関数を呼び出し、ajax によって HTML をロードして使用します。

更新 1

ここで SystemJS と Webpack の違いを見つけました。また、SystemJS を使用できれば、実行時に HTML ファイルをロードできることもわかりました。したがって、この問題は SystemJS の構成で解決できると思います。しかし、そのためには別の問題が発生しますが、それは別の問題になる可能性があると思います. そこで、ここで整理するために新しい質問を投稿しました。

おそらくその質問が解決されたら、SystemJS を試して、解決策が役立つ場合はここに投稿します。

4

5 に答える 5

38

次のようなコンポーネントで[innerHtml] を使用できますmy-template(テストはしていません)。

@Component({
    selector: 'my-template',
    template: `
<div [innerHtml]="myTemplate">
</div>
`})
export public class MyTemplate {
    private myTemplate: any = "";
    @Input() url: string;
    constructor(http: Http) {
        http.get("/path-to-your-jsp").map((html:any) => this.myTemplate = html);
    }
}
于 2016-12-07T16:35:58.800 に答える
18

テンプレートをいくつかの で補間するにはGood Morning, {{title}}、Suguru Inatomi の「ng-dynamic」コンポーネントを使用できます。

最初にインストールする必要があります：

npm install --save ng-dynamic

次に、 NgModule にインポートします。

@NgModule({
  imports: [
    ...
    DynamicComponentModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule {}

最後に、次のように使用します。

@Component({
  selector: 'app-root',
  template: '<div *dynamicComponent="template; context: bindings;"></div>'
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    <h1>Good Morning, {{title}}</h1>
  `;
  constructor(http: Http) {
    http.get("/path-to-your-jsp").map((html:string) => this.template = html); //<- You may set bindings in request headers...
  }
}

SharedModule を定義することにより、テンプレートでコンポーネントを使用できます。ここのドキュメントの例のように成功したカスタム「my-button」を追加しました: https://github.com/laco0416/ng-dynamic

于 2016-12-09T14:25:41.907 に答える