启用angular cli路由后的css问题

Question

问题详细信息

代码中只有一个路由，这是登录组件的默认路由。由于app.component.html中有这行代码<router-outlet></router-outlet>，我的html受到了干扰。如果登录组件中的父div标记直接位于该div<div class="row justify-content-center">内部，则没有问题。有没有办法解决这个问题，因为还有其他组件在它们的根目录下有不同的类。

应用程序中的代码路由模块

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

如果您想将某些类应用于LoginComponent的根级别，您可以使用host属性(基于继承(：

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