我想创建一个网站，你有不同的网站，有不同的背景。但如果我呈现一个component.html，它会被加载到app.html中，就像一个html在另一个html中。
You can see it also because of the two scrollingbar
如果我路由到这个站点，怎么可能只呈现component.html呢？如果我路由站点，并且如果我在app.html <router-outlet>中有，我就会遇到这个问题

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
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: '**',
        component: NotfoundComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.ts

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

应显示的html的CSS

#body {
  background-image:
    url("https://i.pinimg.com/originals/e5/aa/b4/e5aab4e49c9ac29532e4b187e4059ae3.jpg") ;
  background-repeat: no-repeat;
  height: 100vh;
}

#container {
  width: 1000px;
  height: auto;
  margin-top: 200px;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
  background: #FFF;
  opacity: 0.65;
}

#text {
  font-family: "Courier New", Courier, monospace;
  font-size: 80px;
  text-align: center;
  color: black;
}

section {
  height: 100vh;
  width: 100%;
  display: table;

}
section.ok{
  background-color: rgb(255, 0, 0);
}

p{
  color: black;
  font-family: arial;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: "Courier New", Courier, monospace;
  font-size: 80px;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

组件.html

<div id="body" style="overflow-y:auto;scroll-behavior: smooth;" #scroll>
  <section>
    <div id="container">
      <div id="text" (click)="hiHo()">
        {{placeholder[i]}}
      </div>
    </div>
    <a href="#" class="scroll-down" style="color:black" (click)="scrollDown()"></a>
  </section>
  <section class="ok">
    <p>
      <a style="color:black" href="http://quotes.yourdictionary.com/articles/funny-fortune-cookie-sayings.html">Source</a>
      <br>
      <a>Music </a>
      <i style="font-size: 50px" (click)=playAudio() class="btn glyphicon glyphicon-play-circle"></i>
      <i style="font-size: 50px" (click)=stopAudio() class="btn glyphicon glyphicon-pause"></i>
    </p>
  </section>
  <section>
    <div id="container">
    </div>
  </section>
</div>