以角度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