以角度4在组件之间导航

Question

我刚接触角4。

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

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

我没有得到问题的地方，请任何帮助，这是我的组件代码。

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
Nom姓名是必需的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

发生这种情况的原因：

当你在app level 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文件中。

第2步：向应用添加角度路由。 可能这可能会有所帮助： https ： //www.tutorialspoint.com/angular4/angular4_routing.htm

应用程序加载的默认路由应该是主页，这样当你加载应用程序时，主页加载了你想要的背景和按钮，加载谷歌组件时，主页上的所有图片和按钮已删除，并且已加载Google组件特定内容。

Answer 2

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

<router-outlet></router-outlet>

使用相应的组件，如果您希望按钮独占于主组件，则创建一个名为home的组件并添加此路由{path: '', component: HomeComponent}使用home组件中的按钮

以角度4在组件之间导航

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-04-01 17:30:55

解决方案2
0 2019-04-01 17:35:38

以角度4在组件之间导航

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-04-01 17:30:55

解决方案2 0 2019-04-01 17:35:38

解决方案1
0 已采纳 2019-04-01 17:30:55

解决方案2
0 2019-04-01 17:35:38