복붙노트

[ANGULAR] Angular2에서 수백 페이지의 웹 사이트를 실현하는 방법

ANGULAR

Angular2에서 수백 페이지의 웹 사이트를 실현하는 방법

해결법


  1. 1.다음 모든 솔루션은 까다 롭습니다. 공식 각도 팀 지원 문제는 여기에 있습니다.

    다음 모든 솔루션은 까다 롭습니다. 공식 각도 팀 지원 문제는 여기에 있습니다.

    @alexpods 솔루션을 가리키는 @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;
    }
    

    그리고 또 다른 유사한 (@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);
            });
    
  2. from https://stackoverflow.com/questions/36008476/how-to-realize-website-with-hundreds-of-pages-in-angular2 by cc-by-sa and MIT license