Навигация между компонентами в угловых 4 - PullRequest
Новая
       5

Навигация между компонентами в угловых 4

0 голосов
/ 01 апреля 2019

Я новичок в 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 { }

  • my 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>

  • my 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>

Я знаю, что он не очень чистый, но мне нужно найти, где находится ошибка.

Большое спасибо заранее

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Конечно, вы увидите кнопки, потому что компонент приложения является вашим компонентом ввода, маршрутизатор заменит ТОЛЬКО 

<router-outlet></router-outlet>

соответствующим компонентом, если вы хотите, чтобы кнопки были эксклюзивными для домашнего компонента, тосоздать компонент с именем home и добавить этот маршрут {path: ‘’, component: HomeComponent} с помощью кнопок в компоненте home

0 голосов
/ 01 апреля 2019

Причина, по которой это происходит:

Когда у вас есть что-то в html-файле уровня приложения, оно применяется ко всем страницам в полном приложении.

Возможное решение:

Шаг 1. Перестройте код, чтобы получить домашний компонент

Если вы хотите, чтобы изображения и кнопки отображались только на главной странице, а не когда компонент Googleзагружен, вы должны очистить файл app.html, удалить из него весь фон и кнопки и реструктурировать код, как показано ниже:

Создать домашний компонент.

-> В доме.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 все изображения и кнопки с главной страницы удаляются, а содержимое, относящееся к компоненту Google, загружается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...