Angular2で何百ものページを持つウェブサイトを実現する方法

Question

私は何百もの記事のようなページを含むSPAのウェブサイトを準備しています（電子商取引、ログインなどは別として）。すべての記事には独自のURLがあります。私はAngular2を使ってそれを実現したい。私がこれまでに見つかった 唯一の解決策は次のとおりです。

1. templateUrl記事のマークアップを指して... Agular2コンポーネントの何百、すべての記事のための一つの成分...

を準備します。だから私はと同様の構成要素の数百必要があります。AsyncRoute

を使用して記事を表示する

@core.Component({ 
    selector: 'article-1', 
    templateUrl: 'article1.html' 
}) 
export class Article1 {} 

2が欠落しているngIncludeディレクティブは、ありましたAngular1でLazy Loading of Route Components in Angular2

@core.Component({ 
    selector: 'article-wrapper', 
    template: '<router-outlet></router-outlet>' 
}) 
@router.RouteConfig([ 
    new router.AsyncRoute({ 
    path: '/article/:id', 
    loader:() => { 
     switch (id) { 
     case 1: return Article1; 
     case 2: return Article2; 
      //... repeat it hundreds of times 
     } 
    }, 
    name: 'article' 
    }) 
]) 
class ArticleWrapper { } 

を見ますセキュリティ上の問題（hereを参照）のためAngular2で表示されます。

[編集1]コード​​自体に問題はありません。問題はまた、この解決策の静的性質です。サイトマップと動的なページ構造を持つWebサイトが必要な場合 - 単一のページを追加するには、ES6 JavaScriptモジュール全体の再コンパイルが必要です。

[編集2]マークアップは静的なHTMLだけでなく、アクティブなコンポーネントを持つHTMLであるという概念は、Web全体の基本概念です（すべてのCMSはマークアップデータをデータベースに持っています）。 Angular2ソリューションが存在しない場合、この基本的な概念は否定的です。私はいくつかのトリックが存在しなければならないと信じています。

Answer 1

以下のすべての解決策は難しいです。正式なチームサポートの問題はhereです。 @alexpods solutionに私を指しているため@EricMartinezへ

ありがとう：

---

this.laoder.loadIntoLocation(
    toComponent(template, directives), 
    this.elementRef, 
    'container' 
); 

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

    return FakeComponent; 
} 

、別の同様の（ from @jpleclerc）：

@RouteConfig([ 
    new AsyncRoute({ 
    path: '/article/:id', 
    component: ArticleComponent, 
    name: 'article' 
    }) 
]) 
... 

@Component({ selector: 'base-article', template: '<div id="here"></div>', ... }) 
class ArticleComponent { 
    public constructor(private params: RouteParams, private loader: DynamicComponentLoader, private injector: Injector){ 

    } 

    ngOnInit() { 
     var id = this.params.get('id'); 
     @Component({ selector: 'article-' + id, templateUrl: 'article-' + id + '.html' }) 
     class ArticleFakeComponent{} 

     this.loader.loadAsRoot(
      ArticleFakeComponent, 
      '#here' 
      injector 
    ); 
    } 
} 

---

異なるビット（from @peter-svintsitskyi）：

// Faking class declaration by creating new instance each time I need. 
     var component = new (<Type>Function)(); 
     var annotations = [ 
      new Component({ 
       selector: "foo" 
      }), 
      new View({ 
       template: text, 
       directives: [WordDirective] 
      }) 
     ]; 

     // I know this will not work everywhere 
     Reflect.defineMetadata("annotations", annotations, component); 

     // compile the component 
     this.compiler.compileInHost(<Type>component).then((protoViewRef: ProtoViewRef) => { 
      this.viewContainer.createHostView(protoViewRef); 
     });