Question

我是4号角的新手。

我有一个包含3个组件的项目：根，组件1和组件2。

当我单击主页中的按钮时，我将导航到google组件页面，但问题是我在子组件页面中看到了主页按钮和图片。

我没有找到问题所在，请提供任何帮助，这是我的组件代码。

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PikachuComponent } from './pikachu/pikachu.component';
import { GoogleComponent } from './google/google.component';

@NgModule({
  declarations: [
    AppComponent,
    PikachuComponent,
    GoogleComponent
  ],
 imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<!doctype html>
<html lang="fr">
<head>
    <style>
   body 
  {
    background-image:   url("../assets/Background.jpg");
    background-size:    cover;
  }

  #languageSwitch
  {
    text-align: right;
  }

  .centerContent
  {
    text-align: center;
  }

  /* Bootstrap override */
  .btn-primary {
      color: #213239;
      font-weight: bold;
      background-color: white;
      border-color: white;
      border-radius: 50px;
      padding: 3px 30px 3px 30px;
      white-space: nowrap !important;
      min-width: 150px;
      margin: 0px 80px;
  }

  .btn-checkin {
      color: #213239;
      font-weight: bold;
      background-color: white;
      border-color: white;
      border-radius: 50px;
      padding: 3px 30px 3px 30px;
      white-space: nowrap !important;
      min-width: 150px;
    margin: auto;
    text-align: right;
  }
  .btn-group-lg > .btn, .btn-lg {
      padding: 5px 40px 5px 40px;
      min-width: 200px;
  }
    </style>
  </head>
<body>
    <body>
        <img src="./assets/Quadri_medium_2lignes_transparent.png" class="center">
    </body>
    <div style="text-align:center">
        <h3>{{curTime() }}</h3>
    </div>
  <a target="_blank" rel="noopener" routerLink="/google"> <button class="btn-checkin" >Check In</button></a>
  <a target="_blank" rel="noopener" routerLink="/pikachu"> <button class="btn-primary">Check Out</button></a>
</body>
<router-outlet></router-outlet>
</html>

我的google.component.html
否名称为必填项 Prenom 需要Prenom 电子邮件地址 电子邮件地址为必填项
```
 <button type="submit" class="btn btn-success" [disabled]="!Visiteur.form.valid">Next</button>
```

我的index.html

<!doctype html>
<html lang="fr">
<head>
    <style>
        body 
       {
         background-image:  url("../assets/GFIBackground.jpg");
         background-size:   cover;
       }

       #languageSwitch
       {
         text-align: right;
       }

       .centerContent
       {
         text-align: center;
       }

       /* Bootstrap override */
       .btn-primary {
           color: #213239;
           font-weight: bold;
           background-color: white;
           border-color: white;
           border-radius: 50px;
           padding: 3px 30px 3px 30px;
           white-space: nowrap !important;
           min-width: 150px;
         margin: 0px 80px;
       }

       .btn-group-lg > .btn, .btn-lg {
           padding: 5px 40px 5px 40px;
           min-width: 200px;
      }


   .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
     </style>
  <meta charset="utf-8">
  <title>Visiteur GFI</title>
  <base href="/">
</head>
  <app-root></app-root>
</body>
</html>

我知道它不是很干净，但是我需要弄清楚错误在哪里。

非常感谢

Answer 1

发生这种情况的原因：

当您在应用程序级别的html文件中包含某些内容时，它将应用于整个应用程序中的所有页面。

可能的解决方案：

第1步：重组代码以使其具有Home组件

如果您希望图片和按钮仅显示在主页上而不是在加载Google组件时显示，请清除您的app.html文件，从中删除所有背景和按钮，并重新构建代码，如下所示：

创建家庭组件。

->在home.html中。在此处移动背景和按钮代码。

    <img src="./assets/Quadri_medium_2lignes_transparent.png" class="center">

<div style="text-align:center">
    <h3>{{curTime() }}</h3>
</div>

->还将其相关的CSS移至home.css文件。

Step2：将Angular Routing添加到应用程序。可能对您有帮助：https://www.tutorialspoint.com/angular4/angular4_routing.htm

应用程序加载时的默认路由应为首页，这样，当您加载应用程序时，首页会加载您想要的背景和按钮，而当Google组件加载时，所有图片和按钮主页将被删除，并且Google组件的特定内容已加载。

Answer 2

当然，您会看到按钮，因为应用程序组件是您的输入组件，路由器将仅替换

<router-outlet></router-outlet>

对于相应的组件，如果您希望按钮对于home组件是唯一的，则创建一个名为home的组件并添加此路由 {path: ‘’, component: HomeComponent} 通过主页组件中的按钮

在角度为4的组件之间导航

2 个答案: