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

问题描述

我是包含数百条类似的网页（除了电子商务，登录等）preparing 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。以prepare数百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

2. to display an article using 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).

没有与code本身唯一的问题。问题也与此解决方案中的静态性质。如果我需要的网站，网站地图和动态页面结构 - 增加一个页面需要全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.

的概念标记点¯xHTML作为数据（其中标记不仅是静态的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.

推荐答案

所有下列解决方案是棘手。官方角度团队的支持问题是这里。

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

---

一个有点不同（从@彼得 - 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屋！