Angular Material <router-outlet></router-outlet> 不保留 CSS/SCSS 样式

Question

我发现 <router-outlet></router-outlet> 不会保留 CSS/SCSS styling。我创建了一个授权模块。作为该模块的一部分，我有 "login"、"register" 等。我也在使用 MDBootstrap 工具包。

在login.component.html文件中，我列出了一排按钮。这些按钮没有 CSS styling。但是，当我在 app.component.html 中放置完全相同的代码时，CSS/SCSS styling 起作用（见下图）。

为什么会这样？

如有任何帮助、提示或建议，我们将不胜感激。

当前版本：

Angular CLI: 8.3.24
Node: 12.14.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.24
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.24
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cli                      8.3.24
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.24
@schematics/update                0.803.24
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

文件：login.component.html

[上图中]

文件：login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

文件：授权路由。 module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// components that we need to navigate to
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { RegisterComponent } from './register/register.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
    { path: '**' , component: PageNotFoundComponent }
];

@NgModule({
    imports: [ RouterModule.forChild(routesAuth) ], 
    exports: [ RouterModule ],
    declarations: [   ]
  })

export class AuthorizationRoutingModule {}

// according to this, EVERY component developed will be listed under the <router-outlet> </router-outlet>
export const authRoutingComponents = [ LoginComponent, RegisterComponent, ForgotPasswordComponent, PageNotFoundComponent  ]

文件：授权.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorizationRoutingModule } from './authorization-routing. module';
import { authRoutingComponents  } from './authorization-routing. module';

@NgModule({
  declarations: [ authRoutingComponents  ],
  exports: [ authRoutingComponents, AuthorizationRoutingModule ],
  imports: [ CommonModule, AuthorizationRoutingModule ]
})

export class AuthorizationModule { }

文件：应用程序路由。module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthorizationModule } from './kdc/authorization/authorization.module';
import { LoginComponent } from './kdc/authorization/login/login.component';
import { RegisterComponent } from './kdc/authorization/register/register.component';

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule],
})

export class AppRoutingModule { }

文件：app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'trading';
}

Answer 1

用以下代码替换app.componenet.html中的按钮

如果要使用primary, warning, secondary, danger 类表示使用下面的代码:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

如果你想使用颜色属性使用下面的代码:

<button mdbBtn type="button" color="elegant" class="waves-light" 
mdbWavesEffect>Elegant</button>
<button mdbBtn type="button" color="unique" class="waves-light" 
mdbWavesEffect>Unique</button>
<button mdbBtn type="button" color="pink" class="waves-light" 
mdbWavesEffect>Pink</button>
<button mdbBtn type="button" color="purple" class="waves-light" 
mdbWavesEffect>Purple</button>
<button mdbBtn type="button" color="deep-purple" class="waves-light" 
mdbWavesEffect>Deep-Purple</button>
<button mdbBtn type="button" color="indigo" class="waves-light" 
mdbWavesEffect>Indigo</button>
<button mdbBtn type="button" color="light-blue" class="waves-light" 
mdbWavesEffect>Light-blue</button>
<button mdbBtn type="button" color="cyan" class="waves-light" 
mdbWavesEffect>Cyan</button>
<button mdbBtn type="button" color="dark-green" class="waves-light" 
mdbWavesEffect>Dark-Green</button>
<button mdbBtn type="button" color="light-green" class="waves-light" 
mdbWavesEffect>Light-green</button>
<button mdbBtn type="button" color="yellow" class="waves-light" 
mdbWavesEffect>Yellow</button>
<button mdbBtn type="button" color="amber" class="waves-light" 
mdbWavesEffect>Amber</button>
<button mdbBtn type="button" color="deep-orange" class="waves-light" 
mdbWavesEffect>Deep-Orange</button>
<button mdbBtn type="button" color="brown" class="waves-light" 
mdbWavesEffect>Brown</button>
<button mdbBtn type="button" color="blue-grey" class="waves-light" 
mdbWavesEffect>Blue-Grey</button>
<button mdbBtn type="button" color="mdb-color" class="waves-light" 
mdbWavesEffect>MDB</button>

同时检查 MDB 安装： https://mdbootstrap.com/docs/angular/getting-started/quick-start/

另请查看下面的 mdb 按钮： https://mdbootstrap.com/docs/jquery/components/buttons/

Answer 2

您对您的授权模块使用延迟加载，如果您延迟加载一个模块，它不会包含在您的应用程序的全局范围内，并且它无法访问您在 [=10 中导入的模块=].您可能在 AppModule 中导入了 MDB 模块，这就是按钮在 app.component.html.

中正确呈现的原因

您还需要在 AuthorizationModule 中导入 MDB ButtonsModule。

这里是所有 MDB 模块的列表：https://mdbootstrap.com/docs/angular/getting-started/modules/

Angular Material <router-outlet></router-outlet> 不保留 CSS/SCSS 样式

Angular Material <router-outlet></router-outlet> does not preserve CSS/SCSS styling

components

angular-ui-router

angular-material

angular

mdbootstrap