css 启用 angular cli 路由后出现问题

Question

问题详情

代码中只有一个路由，就是登录组件的默认路由。由于 app.component.html 中存在的这一行代码 <router-outlet></router-outlet>，我的 html 受到了干扰。没有问题，如果登录组件中的父div标签直接在这个div<div class="row justify-content-center">里面。有什么方法可以解决这个问题，因为其他组件的根部类不同。

app-routing-module 中的代码

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './auth/login/login.component';

const routes: Routes = [
    {
        component: LoginComponent,
        path: ''
    }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

中的代码

<header></header>
<div class="container-fluid">
    <div class="row justify-content-center">
        <router-outlet></router-outlet>
    </div>
</div>

代码在Login.component.html

<div class="col-md-4">
    <main class="py-4">
    </main>
</div>

Answer 1

如果您想将一些 class 应用到 LoginComponent 的根级别，您可以使用 host property (based on inheritance):

@Component({
    selector: "app-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"],
    host: {
        class: "col-md-4",
    },
})
export class LoginComponent {...}

结果输出：

<div class="row justify-content-center">
  <router-outlet></router-outlet>
  <app-login class="col-md-4">...</app-login>
</div>

css 启用 angular cli 路由后出现问题

css issue after enabling the angular cli routing

angular-cli

angular