2016-03-15 33 views
11

içinde yüzlerce sayfa ile web sitesi nasıl gerçekleştirilir Yüzlerce makale benzeri sayfalar (eTicaret, giriş vb. Dışında) içeren SPA web sitesi hazırlıyorum. Her makalenin kendi URL'si vardır. Angular2 kullanarak bunu gerçekleştirmek istiyorum. Ben bugüne kadar bulunmuş tek çözüm:Angular2

1. templateUrl makale biçimlendirme işaret ile ... Agular2 bileşenlerinin yüzlerce, her makale için bir bileşeni ...

hazırlamak.

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

2. AsyncRoute

Lazy Loading of Route Components in 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 yılında ngInclude yönerge, eksik olduğunu görmeme kullanarak bir makale görüntülemek için: Ben benzer bileşenlerin yüzlerce gerekecektir Güvenlik sorunları nedeniyle Angular2'de (bkz. here).

[Düzenle 1] Sadece kodun kendisinde bir sorun yoktur. Sorun, bu çözümün statik doğa ile de ilgilidir. Site haritası ve dinamik sayfa yapısıyla web sitesine ihtiyacım varsa - tek bir sayfanın eklenmesi tüm ES6 JavaScript modülünün yeniden derlenmesine ihtiyaç duyar.

[Düzenle 2] Kavram olarak "biçimlendirme x html" (yalnızca biçimlendirmenin sadece statik HTML değil, aynı zamanda etkin bileşenlerle birlikte HTML olduğu) kavramı tüm web'in temel kavramlarıdır (her CMS, veri tabanındaki biçimlendirme verilerine sahiptir). Angular2 çözümü mevcut değilse, bu temel kavramı reddeder. Bazı hile var olması gerektiğine inanıyorum.

+0

Bu, kullanıcı tarafından sağlanan şablonlara bağlanmanın eksik desteğiyle ilgili değil mi? –

+0

Bu sorunun amacı ile kafam karıştı. Yani, bir '/ articles/articleId' rotanız varsa ve bu belirli içeriği Id ile almanız için bir istekte bulunursanız, neden tüm statik yüz sayfalara ihtiyacınız var? Javascript'in alacağı büyüklük hakkında konuşmamak için. –

+0

Gunter: Doğru. Angular1 de ngInclude benzer. Joel: Merakla, Angular2'nin "Content by Id" senaryosunu kızdırmadığı anlaşılıyor. Tüm içerikler, bileşen tarafından sarılmalıdır (kod içinde statik olarak tanımlanmıştır). –

cevap

6

Aşağıdaki tüm çözümler zorludur. Resmi Açısal takım desteği sorunu here. @alexpods solution beni işaret için @EricMartinez için

Teşekkür:


this.laoder.loadIntoLocation(
    toComponent(template, directives), 
    this.elementRef, 
    'container' 
); 

function toComponent(template, directives = []) { 
    @Component({ selector: 'fake-component' }) 
    @View({ template, directives }) 
    class FakeComponent {} 

    return FakeComponent; 
} 
Ve başka benzer ( from @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 
    ); 
    } 
} 

farklı Biraz (from @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); 
     }); 
+0

+1; http://stackoverflow.com/a/37994020/1175496, yani platform-tarayıcı ve plastform-browser-dynamic'nin nedeni hakkındadır. ; ikincisi bunları yapmak için gerekli mi? –