如何从组件完全按角度渲染不同的页面？

Question

我想建立一个通过URL路由不同页面的网站。但是，组件的背景已渲染，并且比app.html的mainbackground缩小了px。它与Renderer2一起工作了一点，但与此同时，我无法包含我的CSS文件。

There are also two scrollingbars

component.html （如果我只是设置黑色背景的话）

<div style="background:black; height: 100vh">Hello</div>

component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

css为空

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { IndexComponent } from './index/index.component';
import { EngineeringComponent } from './engineering/engineering.component';

@NgModule({
  declarations: [
    AppComponent,
    NotfoundComponent,
    EngineeringComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([
      {
        path: 'engineering',
        component: EngineeringComponent
      }, {
        path: 'index',
        component: IndexComponent
      }, {
        path: '',
        redirectTo: '/index',
        pathMatch: 'full' ,
      }, {
        path: '**',
        component: NotfoundComponent
      },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  title = 'Angular';
}