RouterLink 在 Angular 6 中不工作

Question

我在看 Brad Traversy 教程编码。我完全按照所说的去做了。这是我的 '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 { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { HomeComponent } from './components/home/home.component';
import { ProfileComponent } from './components/profile/profile.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const appRoutes: Routes = [
  {path:'', component: HomeComponent},
  {path:'register', component: RegisterComponent},
  {path:'login', component: LoginComponent},
  {path:'dashboard', component: DashboardComponent},
  {path:'profile', component: ProfileComponent}
] 
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    ProfileComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) // appRoutes: an object

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的导航栏组件

 <li><a class="nav-link" [routerLink] = "['/']" [routerLinkActive]=" 
['active']">Home</a></li>
 <li><a class="nav-link" [routerLink] = "['/login']" [routerLinkActive]=" 
['active']">Login</a></li>

我也加了

<base href="/">

到 index.html 文件。

当我删除 RouterLink 部分时，页面正常工作 good.it 当我在 URL 中提供路径时，显示组件内的内容。

我检查了几个问题。但是我什么都做了，还是找不到答案。

Answer 1

更新：改进我的回答。您要做的是通过添加带有大括号的 [routerLink] 来调用指令。然后将一个字符串传递给它，该字符串将评估为 javascript 到路由。这将不起作用，因此您需要将其传递为有效 javascript，例如一系列路线。

尝试像这样从路由器链接中删除斜杠和引号：

 <li><a class="nav-link" [routerLink]=['/'] [routerLinkActive]=['active']>Home</a></li>
 <li><a class="nav-link" [routerLink]=['/login'] [routerLinkActive]=['active']>Login</a></li>

如描述

如果这不起作用，请随时发表评论，我会更新我的答案。

亲切的问候克里斯

Answer 2

如下所示编写 routerLinkActive..删除那些括号

 <li>
    <a class="nav-link" [routerLink] = "['/']" routerLinkActive="active">Home</a>
    </li>
    <li>
    <a class="nav-link" [routerLink] = "['/login']" routerLinkActive="active">Login</a> 
   </li>

官方文档：- https://angular.io/guide/router

RouterLink 在 Angular 6 中不工作

RouterLink is not working in Angular 6

node.js

npm

routerlink

angular

angular-cli-v6