Angular 7 Не направляет на новую страницу, но компонент просто отображается под предыдущим компонентом - PullRequest
Новая
       68

Angular 7 Не направляет на новую страницу, но компонент просто отображается под предыдущим компонентом

0 голосов
/ 29 сентября 2019

Я пытаюсь создать панель навигации, в которой при нажатии на один из подразделов вы перейдете на НОВУЮ страницу.На данный момент, когда вы нажимаете на один из подразделов в навигации, этот компонент просто отображается под существующим компонентом на домашней странице.

Вот мой app.component.html 

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
  <div class="navItemList">
    <a class="navbar navItem" routerLink="/about">Home</a>
    <a class="navbar navItem" routerLink="/about">About</a>
    <a class="navbar navItem" routerLink="/about">Scheduling</a>
    <a class="navbar navItem" routerLink="/about">Services</a>
  </div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>

Вот мой app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [CommonModule,
    RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Например, я хочу отобразитьAboutComponent на странице при нажатии кнопки «About» в заголовке.Но когда вы нажимаете «О программе» прямо сейчас, то происходит отображение HomeComponent и под ним AboutComponent.

Ответы [ 3 ]

0 голосов
/ 29 сентября 2019

В <router-outlet></router-outlet> отображаются соответствующие маршруты с соответствующими компонентами.

Также выполните следующие действия:

  • Удалите <app-home></app-home> из app.component.html

  • Измените маршруты таким образом, чтобы при запуске приложения (то есть без маршрутов) оно указывало на HomeComponent 

    const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

  • в вашем списке навигации, измените дом, как это: <a class="navbar navItem" routerLink="/home">Home</a>

0 голосов
/ 29 сентября 2019 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: ' ', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [CommonModule,
    RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//-------------------------------------------

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
  <div class="navItemList">
    <a class="navbar navItem" [routerLink]="['home']">Home</a>
    <a class="navbar navItem" [routerLink]="['about']">About</a>
    <a class="navbar navItem" [routerLink]="['scheduling']">Scheduling</a>
    <a class="navbar navItem" [routerLink]="['Services']">Services</a>
  </div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>
0 голосов
/ 29 сентября 2019

Вам необходимо удалить <app-home></app-home> из вашего app.component.html.И измените ссылку роутера на <a class="navbar navItem" routerLink="/home">Home</a> для кнопки home.

Затем вам нужно добавить путь для root / no path;или, в качестве альтернативы, вы можете добавить универсальный элемент в конце для отслеживания всех маршрутов, когда маршрут отсутствует;но будьте осторожны, потому что порядок имеет значение, поэтому он должен быть последним: 

const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent},
  {path: '**', component: HomeComponent },
];
...