Angular2刷新页面时不注入模板CSS

Angular 2中刷新页面时不注入模板CSS的解决方案

typescript
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  // 定义你的路由
  // ...
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class StyleInjectionGuard implements CanActivate {
  constructor(private router: Router) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 在这里添加样式注入的逻辑
    // 返回 true 表示导航可以继续，返回 false 则会阻止导航
    return true;
  }
}

typescript
const routes: Routes = [
  {
    path: 'your-route',
    component: YourComponent,
    canActivate: [StyleInjectionGuard]
  },
  // 其他路由
  // ...
];

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class StyleInjectionGuard implements CanActivate {
  constructor(private router: Router) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 在这里添加样式注入的逻辑
    this.injectStyles();
    // 返回 true 表示导航可以继续，返回 false 则会阻止导航
    return true;
  }
  private injectStyles() {
    // 在这里添加样式注入的实际逻辑
    // 例如，可以动态创建标签来加载CSS文件
    const linkElement = document.createElement('link');
    linkElement.rel = 'stylesheet';
    linkElement.type = 'text/css';
    linkElement.href = 'path/to/your/styles.css';
    document.head.appendChild(linkElement);
  }
}