Значение по умолчанию для URL маршрутизации неверно в angular 4 - PullRequest
Новая
       53

Значение по умолчанию для URL маршрутизации неверно в angular 4

0 голосов
/ 19 октября 2018

Я изучаю angular 4, я пытаюсь создать приложение, в котором на целевой / домашней странице будет отображаться сообщение «приветствие».И у него будет две вкладки «Главная и продукты», и при нажатии на вкладку «Продукт» будет отображен список продуктов

. Я реализовал только одну проблему, с которой я сталкиваюсь, URL по умолчанию всегда принимает список продуктов, и он показывает список.продуктов на главной странице после обновления.

default productList

файл app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule , Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { productListComp } from './product.list';
import { homeComp } from './home.comp';
const routes : Routes=[
{path:"",redirectTo:"/home",pathMatch:"full"},
{path:"home",component:homeComp},
{path:"productList",component:productListComp}
];
@NgModule({
declarations: [
AppComponent,
productListComp,
homeComp
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [
  ],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import {Router} from '@angular/router'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private _router : Router)
{
}
productListSel(){
console.log("in productListSel");
this._router.navigate(['productList']);
}

homeSel(){
console.log("in homeSel");
this._router.navigate(['home']);
}
}

app.component.html 

<ul class="nav nav-tabs">
   <li class="nav-item"> <a class="nav-link active" data-toggle="tab" 
   (click)="homeSel()">home</a>    </li>
   <li class="nav-item"> <a class="nav-link" data-toggle="tab" 
   (click)="productListSel()">products</a>    </li>

</ul>

Если я нажму на главную вкладку, то появится правильное сообщение "Добро пожаловать", но если я просто сделаю"ng serve -o" или обновлять страницу всегда показывает productList.Что я делаю не так?

1 Ответ

0 голосов
/ 19 октября 2018

Вам необходимо обновить маршруты, например; 

   const routes : Routes=[
    {path:"",redirectTo:"/home",pathMatch:"full"},**strong text**
    {path:"home",component:homeComp},
    {path:"productList",component:productListComp},
    {path: '**', component: homeComp }  ==> Added
];
...