Angular 中的視圖提供程序是什么？ 黑白提供者與視圖提供者有什么區別？

Question

下面代碼中的 viewProviders 是什么？ 它與供應商有何不同？

class Greeter {
   greet(name:string) {
     return 'Hello ' + name + '!';
   }
}    
@Component({
  selector: 'greet',
  viewProviders: [
    Greeter
  ],
  template: `<needs-greeter></needs-greeter>`    
})
class HelloWorld {
}

Answer 1

在您的示例中，提供程序和視圖提供程序之間沒有區別，因為 HelloWorld 的模板不使用<ng-content> 。 如果您在<ng-content>...</ng-content>中投影內容，則無法將 Greeter 注入投影內容中，因為您正在使用

viewProviders: [Greeter] 

如果您希望 Greeter 可能被注入到投影內容中，您可以使用

providers: [Greeter]

因此viewProviders將提供者限制為投影內容以外的兒童，而providers允許所有兒童使用提供者。 其價值在於viewProviders允許您防止投影內容viewProviders您的服務，這在圖書館中可能特別有用。

Answer 2

1. 如果我們想在整個應用程序中共享一個服務實例，我們可以在 NgModule 的提供者中配置它。
2. 如果我們希望每個組件有一個服務實例，並與所有組件的子組件共享，我們可以在組件裝飾器的 providers 屬性上配置它。 子是一個視圖子。
3. 如果我們希望每個組件有一個服務實例，並且只與組件的視圖子組件共享而不是組件的內容子組件共享，我們可以在組件裝飾器的 viewProviders 屬性上配置它。

Answer 3

在整個應用程序中共享一個服務實例 -> 在根模塊 [AppModule] 的提供者中配置它

在整個模塊中共享一個服務實例 -> 在該模塊的提供者中配置它

在整個組件中共享一個服務實例 -> 在該組件的提供者中配置它

跨組件共享一個服務實例 [僅 ViewChildren 而不是 ContentChildren] -> 在該組件的 viewProviders 中配置它

Answer 4

這取決於所需的 scope 服務：

• 模塊范圍的單個 Service 實例：在 @NgModule 裝飾器中使用providers:[Service]
• 組件范圍的單個服務實例：在 @Component 裝飾器中使用providers:[Service] 。 此服務實例將與該組件的ContentChildren和ViewChildren共享

ContentChildren : 使用 content-projection 投影到組件中的子組件，即<ng-content></ng-content>

ViewChildren ：在組件模板內定義且未投影的子組件。

• 組件范圍的單個服務實例，不包括 ContentChildren ：在 @Component 裝飾器中使用viewProviders: [Service]

Answer 5

有點離題，但我想更正一些答案，指出@NgModule 中提供的服務是可用於應用程序的整個 scope 的單例。 您可能會遇到不正確的情況。

服務不存在於模塊中，它們存在於注入器中。 在最頂層 Angular 有 Null 噴射器，下面是平台噴射器，下面是根噴射器。 Platform 和 Root 是模塊注入器。 模塊中提供的天氣服務位於根注入器中，取決於模塊是否被急切加載。 急切加載的模塊中提供的服務是在根注入器中創建的，因此在這些情況下，在 @NgModule 中提供服務將使該服務成為根注入器中的 singleton。 然而，對於延遲加載的模塊，angular 創建了更多的模塊注入器（每個延遲加載的模塊有一個注入器），它位於docs的根注入器之下。 在這種情況下，在@NgModule 中提供服務不會為您提供可用於應用程序的整個 scope 的 singleton 服務，而是提供給延遲加載模塊的子級可用的服務。

To avoid thinking about this (for angular 6+), if you want a singleton for your entire app, you can tell angular, you want the service in your root injector in the service class itself:

@Injectable({
   provideIn: 'root'
})
class MyService...

這將確保服務在 Angular 的根注入器中可用