Detailed explanation of the usage scenarios of Injection token PLATFORM_ID in Angular Dependency Injection System

Angular Dependency Injection

Angular's dependency injection system is one of its core features, which allows us to easily share and manage code in various parts of the application. In Angular's dependency injection system,InjectionTokenis a particularly important concept.InjectionTokenis a tag class for parameter types that can be used to inject specific values ​​into a dependency injector. Here, we will focus on the discussionPLATFORM_IDThis specialInjectionToken。

PLATFORM_ID

PLATFORM_IDis a tag class that marks the platform on which the current application is running. In Angular, the platform can be a browser, a server, or some other platform. By injectionPLATFORM_ID, we can determine the current platform at runtime. This is very useful for platform-specific code because we can dynamically change the behavior of our application based on the current platform.

For example, we might have some code that runs only in the browser, and we don't want this code to be executed during server-side rendering (SSR). At this time, we can usePLATFORM_IDTo check whether the current platform is a browser:

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
ngOnInit() {
  if (isPlatformBrowser()) {
    // These codes only run in the browser  }
}

In the above code, we first start with@angular/coreImportedPLATFORM_ID, and then from@angular/commonImportedisPlatformBrowserFunction. In the component's constructor, we injectPLATFORM_ID, and then inngOnInitIn the method, we useisPlatformBrowserFunction to check whether the current platform is a browser. If so, then we execute some code that only runs in the browser.

The advantage of this approach is that our code can behave differently according to the platform without changing the structure of the code. This makes our code more flexible and maintainable.

Apart fromisPlatformBrowser, Angular also providesisPlatformServerFunction, we can use it to check whether the current platform is a server. This is also very useful for server-side rendering (SSR).

The above isPLATFORM_IDA basic usage scenario. However, its uses go far beyond that. By using reasonablyPLATFORM_ID, We can let our Angular applications behave differently on different platforms without changing the structure of the code. This makes our code more flexible and maintainable.

Summarize

PLATFORM_IDis a very useful tool for Angular that helps us better manage and organize our code. In actual development, we should make full use ofPLATFORM_IDto improve the quality of our code and development efficiency.

The above is the detailed explanation of the usage scenarios of Injection token PLATFORM_ID in the Angular dependency injection system. For more information about Angular dependency injection PLATFORM_ID, please pay attention to my other related articles!