我在编写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部分时,页面工作正常。当我在URL中给出路径时,它会显示组件内的内容。
我签了好几个问题。但我已经做了一切,我无法找到答案。
答案 0 :(得分:0)
更新:改进我的答案。您尝试做的是通过添加带有大括号的[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>
如上所述here:
如果这不起作用,请随意发表评论,我会更新我的答案。
亲切的问候克里斯
答案 1 :(得分:0)
将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