Как реализовать сайт с сотнями страниц в Angular2

Я готовлю сайт SPA, содержащий сотни страниц, похожих на статьи (помимо электронной коммерции, логин и т. Д.). Каждая статья имеет свой собственный URL. Я хочу понять это с помощью Angular2. Единственное решение, которое я нашел до сих пор:

1. подготовить сотни компонентов Agular2, один компонент для каждой статьи …

… с templateUrl, указывающим на разметку статьи. Поэтому мне понадобятся сотни компонентов, похожих на:

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

2. для отображения статьи с использованием AsyncRoute

см. « Ленивая загрузка компонентов маршрута в Angular2»

 @core.Component({ selector: 'article-wrapper', template: '' }) @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 из-за проблем безопасности (см. Здесь ).

[Редактировать 1] Существует не только проблема с самим кодом. Проблема также связана со статическим характером этого решения. Если мне нужен сайт с картой сайта и динамической структурой страницы – добавление отдельной страницы требует перекомпиляции всего модуля JavaScript ES6.

[Edit 2] Концепция «разметка x html как данные» (где разметка – это не только статический HTML, но и HTML с активными компонентами) – это базовая концепция всей сети (каждая CMS имеет свои данные разметки в базе данных). Если для него не существует решения Angular2, оно отрицает это основное понятие. Я считаю, что должен быть какой-то трюк.

Все следующие решения сложны. Официальная проблема поддержки угловой команды здесь .

Благодаря @EricMartinez для указания на решение @alexpods :

 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: '
', ... }) 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 (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(component).then((protoViewRef: ProtoViewRef) => { this.viewContainer.createHostView(protoViewRef); }); 
  • Как я могу расширить вызов базовых classов вариационных шаблонов?
  • Можно ли создавать стандартные шаблоны контейнеров с неполными типами?
  • Как преобразовать lambda в std :: функцию с помощью шаблонов
  • Распространение «typedef» из основанного на производный class для «шаблона»
  • Как предотвратить создание неспециализированных шаблонов?
  • C ++ шаблон typedef
  • Специализация шаблона и проблемы с enable_if
  • Дизайн шаблонов веб-приложений
  • Когда следует использовать Observer и Observable
  • Как работает эта функция шаблона «размер массива»?
  • Шаблон в шаблоне: почему `` >> должен быть `>> 'в списке вложенных шаблонов шаблонов"
  • Давайте будем гением компьютера.