2

我正在使用 TypeScript 学习 Angular JS。我有 Angular JS 的经验。但是当它与 TypeScript 集成时，它对我来说是全新的。我现在正在为我的应用程序配置路由。

This is my app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';
//import { AppRoutingModule }  from './app-routing.module';



import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [
{
  path: '',
  component: HomeComponent
},
{
  path : 'directory',
  component : DirectoryComponent
}
];



@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  DirectoryComponent,

  ],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routes)
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在该文件中配置了路由。当我直接从浏览器访问路由时，它正在工作。然后我尝试在 app.component.html 中添加链接。这是我的 app.component.html

<h1>
  {{title}}
</h1>

<div>
    <ul>
        <li>
            <a [routerLink]="['/']">Home</a>
        </li>
        <li>
            <a [routerLink]="['directory']">Directory</a>
        </li>
    </ul>
</div>

<div>
    <router-outlet></router-outlet> 
</div>

然后我点击链接。两者都没有工作。但是当我直接在 URL 栏中输入路由值时，它就可以工作了。我的 HomeComponent 和 DirectoryComponent 很简单。他们只是在显示一条消息。

当我第一次访问“/目录”网址时它正在工作。它显示目录页面。从那里当我单击主页链接时，它会更新到主页。但网址仍然是“目录”。但是当我再次单击目录链接时，什么也没有发生。

我遵循了这些解决方案

routerLink 在角度 2 中不起作用

routerlink在angular2中不起作用

路由器链接不工作

都没有工作。

我检查了 HTML 元素，它正在正确呈现链接。问题是当我点击链接时，什么也没有发生。

在此处输入图像描述

我正在使用最新版本的 Angular JS。我的代码有什么问题？

4

2 回答 2

0

我遇到了同样的问题，事实证明，如果路由不存在，那么路由将无济于事。我有

<nav>
    <a routerLink="/review" >Full reviews</a>
</nav>

但是我的溃败被设置为review（没有）
希望这对其他人有帮助

于 2021-11-05T19:34:39.510 回答
0

这是因为主目录更改路由器链接到另一个名称，它将解决您的问题。

而不是 '' 使用一些名称

于 2017-12-26T14:34:18.940 回答