如何在Angular2中注入相同組件的新實例

[更新]請閱讀註釋歷史記錄以瞭解上下文。如何在Angular2中注入相同組件的新實例

所有：

我非常新的angular2，當我跟隨它的快速入門指南，有一個問題讓我困惑：

我簡化app.component.ts爲：

import { Component } from "angular2/core"; 
@Component({ 
    selector: "my-app", 
    template: "<div>{{title}}</div>" 
}) 
export class AppComponent { 
     title = "Tour of Heroes" + Math.random(); 
}

我再添我-app標記爲index.html的，如：

<body> 
    <my-app>Loading...</my-app> 
    <my-app>Loading...</my-app> 
    </body>

我想知道爲什麼第二個不能渲染？

與此相關的另一個問題是：

如果我把相同的組件的兩個實例，每個人都會保持自己的成員變量，但如果我注入服務爲一體的組件，然後將所有組件實例共享相同的服務實例，我發現唯一明顯的區別是他們使用不同的註釋（除此之外，他們都導出一個類）：@Component和@Injectable，一個在指令數組中，另一個在提供者數組中。 我不知道這2個註釋是否告訴角度如何處理實例或指令數組和提供者數組呢？

來源

2016-03-07 Kuan

評論可以被刪除，如果該意見包含對回答這個問題，應該比你反映的是信息到這個問題的重要信息。 – Tezra

Angular2不允許在HTML頁面中引導兩次相同的組件。

但是，如果您想要在同一個HTML頁面中，則可以引導不同的應用程序組件。

看到這個文檔瞭解更多信息：

https://angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html（節「自舉多個應用程序」）

編輯

關於你提到的第二個問題，你需要知道@Component和@Injectable是裝飾者。他們負責「包裝」目標實例，並通過在構造函數中根據配置的元數據提供正確的依賴實例來允許依賴注入。

關於分層噴射器，你可以看看這個鏈接：

What's the best way to inject one service into another in angular 2 (Beta)?

來源

2016-03-07 18:56:25

謝謝，所以這意味着只有根應用程序組件可能有這個限制問題？如果我把組件放在應用程序組件中，那麼一切都好？ – Kuan

是的，它只是在引導階段。您可以在Angular2應用程序中使用您想要的組件;-) –

您也可以在同一頁面中引導幾個不同的組件... –

這是目前不支持。您需要用bootstrap(AppComponent)初始化每個根組件，但只有在兩個組件具有不同的選擇器時才起作用。

也https://github.com/angular/angular/issues/7136

來源

2016-03-07 18:56:44

是的，它適用於其他組件內的組件。根組件還有其他限制https://github.com/angular/angular/issues/1858 –

謝謝，我想知道Angular2如何決定何時生成新的或重用現有的實例？那是因爲如果我使用'@ Injectable'或使用'@ Componnet'？ – Kuan

角度DI是分層的。每個組件，指令，管道......都有自己的注入器，每個子組件注入器都是父組件注入器的子組件。 'bootstrap（）'創建根注入器。當DI查找依賴關係時，它會從請求組件向root進行迭代。當它找到提供者時，它從那裏請求實例。發現提供者的注入器保留了一個依賴關係的實例，並且每次都返回相同的結果。如果你得到一個新的實例，或者取決於你註冊提供者的地方。 –

-1

見據我所知，除了主要的組件，您可以在同一個HTML網頁使用任何其他部件多次。

可以通過使用@input裝飾聲明在HTML中的選擇元素/指令的屬性，並通過使用@input裝飾得到的組件，屬性的值達到這個

進口{組件，輸入}來自「 angular2 /芯「;

@Component({ 
    selector: "my-app", 
    template: "<div>{{title}}</div>" 
}) 
export class AppComponent { 
     @Input() title; 
}  
    <body> 
    <my-app title = "somedata1">Loading...</my-app> 
    <my-app title = "somedata2">Loading...</my-app> 
    </body>

能在這個環節上找到一個例子

Angular2 .. Using the same component to show different data on the same page depending on service response

來源

2017-06-07 14:22:17 praveen

如何在Angular2中注入相同組件的新實例

回答

相關問題