На маршруте Angular2 неправильно загружается домашняя страница - PullRequest
Новая
       5

На маршруте Angular2 неправильно загружается домашняя страница

0 голосов
/ 21 ноября 2018

Получил простой демонстрационный сайт с 2 страницами (дом и проект).Когда я нажимаю с главной страницы на страницу проекта через меню, все работает нормально.Но когда я нажимаю ссылку с домашней страницы на ссылку на страницу проекта, страница проекта отображается в секунду, а затем домашняя страница перезагружается.У кого-нибудь есть идея, что может быть не так?Если я сделаю замену якоря кнопкой, он тоже будет работать!Поэтому я думаю, что-то не так с href = ""

Маршруты: 

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [
  ...,
  RouterModule.forRoot(routes, { useHash: true })
],
exports: [
],

})

Панель навигации (работает нормально): 

<a [routerLink]="['/project']" class="nav-link">Project</a>

HTML (домашняя страница - это компонент): 

<a href="" (click)="showProject()">project</a>

машинописный текст (компонента): 

import { Router } from '@angular/router';

constructor(private router: Router) {
  ...
}

public showProject() {
  this.router.navigate(['/project']);
}

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

попробуйте пустой [routerLink] 

  <a [routerLink]="" (click)="showProject()">project</a>
0 голосов
/ 21 ноября 2018

Что-то, что, кажется, работает, заменяет ссылку якоря: 

<a href="javascript:void(0)" (click)="showProject()">
0 голосов
/ 21 ноября 2018

Самое важное, вам нужно удалить атрибут href на странице html:

Якорь HTML: 

<a href="" (click)="showProject()">project</a>

Необходимо использовать без атрибута href. 

<a (click)="showProject()">project</a>

В противном случае страница будет полностью перезагружена.Затем некоторые предложения по настройке маршрутизации.Измените маршрут constant с помощью: 

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: '' }
];

В компоненте просто измените метод showProject с помощью: 

public showProject() {
  this.router.navigate(['project']);
}
...