在 Angular 4 中的组件之间导航答案

【问题标题】：Navigating between components in angular 4在 Angular 4 中的组件之间导航
【发布时间】：2019-04-01 17:17:58
【问题描述】：

我是 Angular 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>

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

在此先感谢

【问题讨论】：

标签： html angular forms routing

【解决方案1】：

发生这种情况的原因：

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

可能的解决方案：

第 1 步：重构代码以拥有 Home 组件

如果您希望图片和按钮只出现在主页上而不是在加载 google 组件时出现，您应该清除您的 app.html 文件，从中删除所有背景和按钮，然后重新构建代码如下：

创建一个 home 组件。

--> 在 home.html.. 把你的背景和按钮代码移到这里。

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

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

--> 也将它们相关的css移动到home.css文件中。

第 2 步：将 Angular 路由添加到应用程序。可能这可能会有所帮助：https://www.tutorialspoint.com/angular4/angular4_routing.htm

应用加载的默认路由应该是到首页，这样当你加载应用时，首页会加载你想要的背景和按钮，而当谷歌组件加载时，所有图片和按钮都来自主页被删除，谷歌组件的特定内容被加载。

【讨论】：

【解决方案2】：

当然你会看到按钮，因为应用组件是你的入口组件，路由器只会替换

<router-outlet></router-outlet>

使用对应的组件，如果你想让按钮独占home组件，那么制作一个名为home的组件并添加这个路由 {path: ‘’, component: HomeComponent} 在 home 组件中带有按钮

【讨论】：