如何在Angular2中实现数百页的网站
我正在准备SPA网站，其中包含数百个类似文章的页面（除了电子商务，login等）。 每篇文章都有自己的url。 我想用Angular2来实现它。 我到目前为止唯一的解决scheme是：
1.准备数百个Agular2组件，每个文章一个组件
用templateUrl指向文章标记。 所以我将需要数百个组件类似于：
@core.Component({ selector: 'article-1', templateUrl: 'article1.html' }) export class Article1 {} 2.使用AsyncRoute显示文章
请参阅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 { }
在Angular1中有ngInclude指令，由于安全问题（见这里 ），在Angular2中缺less这个指令。
[编辑1]代码本身不仅有问题。 问题也是这个解决scheme的静态性质 。 如果我需要站点地图和dynamic页面结构的网站 – 添加单个页面需要重新编译整个ES6 JavaScript模块。
[编辑2]“标记x html作为数据”（其中标记不仅是静态HTML，而且还包含活动组件的HTML）的概念是整个web的基本概念（每个CMS在数据库中都有它的标记数据）。 如果不存在Angular2解决scheme，它否认了这个基本概念。 我相信一定有一些窍门。
以下所有解决scheme都很棘手。 官方Angular团队的支持问题在这里 。
感谢@EricMartinez指向@alexpods解决scheme ：
this.laoder.loadIntoLocation( toComponent(template, directives), this.elementRef, 'container' ); function toComponent(template, directives = []) { @Component({ selector: 'fake-component' }) @View({ template, directives }) class FakeComponent {} return FakeComponent; }
和另一个类似的（ 来自@ 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 ); } }
有点不同（ 从@ 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); });
