Angular Material 不保留CSS / SCSS样式

Question

我发现<router-outlet></router-outlet>不能保存CSS/SCSS styling。我创建了一个授权模块。作为该模块的一部分，我具有“登录”，“注册”等。我也在使用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  ]

文件：authorization.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 { }

文件：app-routing.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中的按钮

如果要使用主要，警告，次要，危险类别，请使用以下代码：

<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/