如何在Angular2中实现数百页的网站 [英] How to realize website with hundreds of pages in Angular2

问题描述

我正在准备包含数百个类似文章的页面(电子商务、登录等除外)的 SPA 网站.每篇文章都有自己的网址.我想使用 Angular2 来实现它.到目前为止，我找到的唯一解决方案是:

I am preparing SPA website containing hundreds of article-like pages (apart from eCommerce, login etc.). Every article has its own URL. I want to realize it using Angular2. The only solution I found so far is:

1.准备数百个 Agular2 组件，每篇文章一个组件...

...使用 templateUrl 指向文章标记.所以我需要数百个类似于以下内容的组件:

...with templateUrl pointing to article markup. So I will need hundreds of components similar to:

@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 中缺少该指令(参见 此处).

In Angular1 there was ngInclude directive, which is missing in Angular2 due to the security issues (see here).

[Edit 1] 不仅代码本身有问题.问题还在于此解决方案的静态性质.如果我需要带有站点地图和动态页面结构的网站 - 添加单个页面需要重新编译整个 ES6 JavaScript 模块.

There is not only problem with the code itself. Problem is also with static nature of this solution. If I need website with sitemap and dynamic page structure - adding a single page needs recompilation of the whole ES6 JavaScript module.

概念标记 x html 作为数据"(其中标记不仅是静态 HTML，而且是具有活动组件的 HTML)是整个网络的基本概念(每个 CMS 在数据库中都有其标记数据).如果不存在 Angular2 解决方案，它就否定了这个基本概念.我相信一定有什么技巧.

The concept "markup x html as data" (where markup is not only static HTML but also HTML with active components) is basic concept of whole web (every CMS has its markup data in database). If there does not exist Angular2 solution for it, it denies this basic concept. I believe that there must exist some trick.

推荐答案

以下所有解决方案都很棘手.官方 Angular 团队支持问题是此处.

All following solutions are tricky. Official Angular team support issue is here.

感谢@EricMartinez 将我指向@alexpods 解决方案:

Thanks to @EricMartinez for pointing me to @alexpods solution:

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);
        });

这篇关于如何在Angular2中实现数百页的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！