我已经使用了这种方法,在其他组件和服务文件中实现了服务器端渲染.import { Component, OnInit, Inject } from '@angular/core';从@angular/core"导入{平台ID};从'@angular/common'导入{isPlatformBrowser};@成分({选择器:'你的组件',templateUrl: '你的组件.component.html',styleUrls: ['your-component.component.css'],})导出类 YourComponent 实现 OnInit {构造函数(@Inject(PLATFORM_ID)私有_platformId:对象){}ngOnInit() {如果(isPlatformBrowser(this._platformId)){//这里你可以访问localStorage} 别的 {//这里你在服务器端,localStorage 不可用}}}这是我在 app-routing.module.ts 中需要实现服务器端渲染的部分const 路由:Routes = [{小路: '',路径匹配:'完整',重定向到: isPlatformBrowser(platformId) ?localStorage.getItem('countryCode') : null ||'我的'}];@NgModule({进口:[RouterModule.forRoot(路由,{scrollPositionRestoration: '启用',onSameUrlNavigation: '重新加载'})],出口:[路由器模块]})导出类 AppRoutingModule {}如何在app-routing.module.ts中实现服务端渲染?任何人都可以帮我解决这个问题吗? 解决方案 您可以尝试使用 RouteGuard 进行重定向:@Injectable({提供在:'根'})导出类 RedirectGuard 实现 CanActivate {构造函数(@Inject(PLATFORM_ID)私有_platformId:对象,私有路由器:路由器){}canActivate(下一个:ActivatedRouteSnapshot,状态:RouterStateSnapshot){如果(isPlatformBrowser(this._platformId)){const path = localStorage.getItem('countryCode');返回 this.router.parseUrl(path);} 别的 {返回 this.router.parseUrl('/my');}}}并将您的路线更改为:const 路由:Routes = [{小路: '',路径匹配:'完整',canActivate:[重定向保护]}];I am trying to do Server-side rendering in my Angular application using angular universal. The issue is that I have to apply the isPlatformBrowser() function in the routing.module.ts file also (where I need to pass platformId in the parameter).I have used this method, to implement server-side rendering in other components and service files.import { Component, OnInit, Inject } from '@angular/core';import { PLATFORM_ID } from '@angular/core';import { isPlatformBrowser} from '@angular/common';@Component({ selector: 'your-component', templateUrl: 'your-component.component.html', styleUrls: ['your-component.component.css'],})export class YourComponent implements OnInit { constructor(@Inject(PLATFORM_ID) private _platformId: Object) {} ngOnInit() { if (isPlatformBrowser(this._platformId)) { // here you can access localStorage } else { // here you are on the server side and localStorage is not available } }}This is my part of app-routing.module.ts where I need to implement server-side renderingconst routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: isPlatformBrowser(platformId) ? localStorage.getItem('countryCode') : null || 'my' }];@NgModule({ imports: [ RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', onSameUrlNavigation: 'reload' }) ], exports: [RouterModule]})export class AppRoutingModule {}How can I implement server-side rendering in app-routing.module.ts? Can anyone please help me with this issue? 解决方案 You can try to use a RouteGuard to do the redirect:@Injectable({ providedIn: 'root'})export class RedirectGuard implements CanActivate { constructor(@Inject(PLATFORM_ID) private _platformId: Object, private router: Router) {} canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (isPlatformBrowser(this._platformId)) { const path = localStorage.getItem('countryCode'); return this.router.parseUrl(path); } else { return this.router.parseUrl('/my'); } }}And change your routes to this:const routes: Routes = [ { path: '', pathMatch: 'full', canActivate: [RedirectGuard] }]; 这篇关于如何使用一个模块到另一个模块的变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-13 04:56