Question

我正在用app.component.html内的角度开发登录屏幕，如下所示：

app.component.ts

<div class="container">
   <app-login></app-login>
</div>

和CSS这样：

login.css

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin: 0 0 5px 0;
}

app.component.css

.container {
  display: grid;
  height: 100%;
}

app-login {
  width: 100%;
  max-width: 274px;
  place-self: center;
}

但是，由于我现在已将路由合并到我的应用程序中，因此我使用<router-outlet>组件显示登录页面，但这曾经使登录页面的CSS毁于一旦。

app.component.ts

<div class="container">
   <router-outlet></router-outlet>
</div>

如何更改CSS文件，以便恢复以前的外观？

这里是我的示例的 stackblitz

更新找到缺少的CSS的解决方案（见下文）

但是现在看来，它在屏幕上占据了很多位置，将我的元素向下推？

Answer 1

您需要设置

encapsulation: ViewEncapsulation.None

在AppComponent上

允许样式也影响在AppComponent内部使用的那些组件。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
   name = 'Angular';
}

但是最好在声明了它们的那些组件上使用样式。

这是有效的Stackblitz。

Answer 2

您要在app.component.css文件中定位<app-login>并将其样式设置为具有固定宽度并使其居中对齐。您要记住的是，Angular强制执行了仿真视图封装，并且当您使用路由器时，<app-login>可能会在运行时更改为某个随机动态名称，从而使您可能已经在应用程序中编写的CSS类成为可能。 component.css无效。

在组件的相应CSS文件中而不是在根组件css文件中编写组件样式始终是一种最佳实践。

这是一个已更改的Stackblitz

结果是：

输入路由器出口

2 个答案: