首页 > 解决方案 > 角度视图封装不适用于某些组件

问题描述

我们正在使用官方升级指南将 Angular 从版本 7 升级到版本 9 。

在升级过程中,我们注意到大部分组件不再正确封装其样式。当我们查看正在应用的样式时,它们中的大多数都没有显示带有通用_ngcontent-c8标签类型的样式。更重要的是,对于确实具有这些样式的元素,我可以在浏览器检查器中看到没有这些属性的重复样式可用。

如果重要的话,正确封装其样式的组件将在一段SharedModule时间内,未正确封装的组件将成为各个页面的一部分。

除了升级中推荐的以外,我们在升级过程中没有更改任何配置。我们也没有更改ViewEncapsulation任何有问题的组件。

如果重要,以下是应用程序中如何处理路由的要点:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppRootRoutePath as routePath } from './core/enums/app-root-route-paths.enum';

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: routePath.LOGIN,
        pathMatch: 'full'
      },
      {
        path: routePath.LOGIN,
        loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
      },
      {
        path: routePath.BACKDOOR_LOGIN,
        loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
      },
      {
        path: routePath.FORGOT_USER_PASSWORD,
        loadChildren: () => import('./forgot-credential/forgot-credential.module').then(m => m.ForgotCredentialPageModule)
      },
      {
        path: routePath.REGISTRATION,
        loadChildren: () => import('./registration/registration.module').then(m => m.RegistrationModule)
      },
      {
        path: routePath.VERSION_INDICATOR,
        loadChildren: () => import('./version-indicator/version-indicator.module').then(m => m.VersionIndicatorModule)
      },
      { path: '**', redirectTo: 'login', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: false,
      anchorScrolling: 'enabled'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

标签: angularsass

解决方案


推荐阅读