Angular 4+：<a>元素中的RouterLink无法正常工作

Question

我已经把我AppRoutingModule里面imports的@NgModule的AppModule类。

AppRoutingModule的定义方式如下：

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

我已经放置<router-outlet></router-outlet>在app.component.html中。

页面根据URL正确显示：

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

问题出在我的header.component.ts中，我试图将routerLink添加到主页。我已经尝试过这样的解决方案：

<img routerLink="home" ... />
<img [routerLink]="/home" ... />
<a routerLink="home"> <img ... /></a>
<a [routerLink]="home" ... ><img ... /></a>

首先，当我将routerLink放置在<img>元素中时，找不到这样的指令。然后在<a>元素中，它使<a href="/home">routerLink 变得随意，并重新加载整个页面！它不应该只重新加载的内容<router-outlet>吗？

也许我的布局看起来像这样有些含义：

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

和routerLink放在子组件 <header-bar>（徽标）中的元素上，并应<router-outlet> 在其父组件中导航？

但我一直在使用还测试了这款行为routerLink S置于内AppComonent直接和什么都没有改变！RouterLink仍重新加载网页！：

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>

Answer 1

您需要更多才能使路由正常工作。AppRoutingModule您的文件应如下所示

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent, LessonOffersComponent } from somewhere;

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

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