时间戳

首页 > 解决方案 > 如果我在空的 app.html 中加载一个 component.html，它们会以一种奇怪的方式重叠

javascript - 如果我在空的 app.html 中加载一个 component.html，它们会以一种奇怪的方式重叠

问题描述

我想创建一个网站，在那里你有不同的网站，有不同的背景。但是如果我渲染一个component.html，它会被加载到app.html中，就像另一个html中的html一样。

由于两个滚动条，您也可以看到它

如果我路由到这个，怎么可能只渲染component.html？如果我路由站点并且如果我在 app.html 中有这个问题

app.module.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 { }

app.component.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>

标签： javascriptcssangulartypescriptrouting

解决方案

看起来你的路由是正确的。但是我总是使用一些东西来设置默认组件。像这样在我RouterModule.forRoot([])的顶部：

{ path: '', redirectTo: 'engineering', pathMatch: 'full' },

你能提供样式表中的代码或制作一个stackblitz吗？我认为这与容器的大小和您的背景较大导致滚动有关。

推荐阅读