AngularJS 2 - 重用組件

我正在使用AngularJS作爲模板框架在我的項目中。AngularJS 2 - 重用組件

我不想使用只Angular，還插入一些HTML。

<body> 
    <my-app>Loading...</my-app> 
    <hr /> 
    <!-- Another selector but doesn't work --> 
    <my-app>Loading...</my-app> 
</body>

我想重用的選擇，但第二個電話不被模板替換。

有沒有什麼辦法在呼叫之間插入不同的數據時重用組件？

我知道Angular2如何與全局組件和孩子一起工作，但有什麼方法可以繞過嗎？像使用partials組件？

我知道它可以像this一樣完成。

但是，如果我想插入不同的數據時重複使用模板3次，我必須聲明3個組件？是否有可能創建相同選擇器的許多實例？

來源

2016-02-26 Zysce

這不支持。第一個標籤的兩次都被處理，第二個未被達到。你會需要像https://github.com/angular/angular/issues/915

和https://github.com/angular/angular/issues/7136
這表明一個解決辦法http://plnkr.co/edit/O0KRZHUz5jdW40mY1EgA?p=preview。

let app = platform(BROWSER_PROVIDERS).application([BROWSER_APP_PROVIDERS]); 

function bootstrapWithCustomSelector(app, componentType, selector:string) { 
    var bootstrapProviders = [ 
     provide(APP_COMPONENT_REF_PROMISE, 
       { 
       useFactory: (dynamicComponentLoader: DynamicComponentLoader, appRef: ApplicationRef, 
          injector: Injector) => { 
        console.log('now'); 
        var ref: ComponentRef; 
        return dynamicComponentLoader.loadAsRoot(componentType, selector, injector, 
                  () => { appRef._unloadComponent(ref); }) 
         .then((componentRef) => ref = componentRef); 
       }, 
       deps: [DynamicComponentLoader, ApplicationRef, Injector] 
       }), 

    ]; 
    return app.bootstrap(componentType, bootstrapProviders); 
} 

bootstrapWithCustomSelector(app, AppComponent, 'my-custom-app');

來源

2016-02-26 08:36:23

如果我沒有弄錯，解決方法只允許重命名選擇器，但我不能重用它。我仍然無法添加另一個選擇器「my-custom-app」的實例。或者，是否有任何實際的方法來爲我想要做的事情使用這種解決方法？ – Zysce

似乎是你想要什麼的另一種方式。解決方法允許兩次引導相同的組件。 –

我試圖使用此解決方法來達到所需的結果。我使用Input來允許提供者返回不同的數據。我對視圖有問題：http://plnkr.co/edit/cDrAL84k1BKMKzEG7jU6?p=preview – Zysce

AngularJS 2 - 重用組件

回答

相關問題