typescript routerLink在Angular中不工作

yuvru6vn  于 2023-05-23  发布在  TypeScript
关注(0)|答案(3)|浏览(174)

我正在使用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很简单。他们只是在传递一个信息。
当我第一次访问'/directory' url时,它正在工作。显示目录页。从那里当我点击主页链接,它是更新到主页。但URL仍然是“目录”。但是当我再次单击目录链接时,什么也没有发生。
我遵循了这些解决方案
routerLink is not working in angular 2
routerlink not working in angular2
RouterLink does not work
一切都不正常。
我检查了HTML元素,它正确地呈现了链接。问题是当我点击链接时,什么也没发生。

我使用的是最新版本的Angular JS。我的代码有什么问题?

j5fpnvbx

j5fpnvbx1#

因为主目录将routerlink更改为另一个名称,它将解决您问题。
使用一些名称代替“”

67up9zun

67up9zun2#

我也遇到了同样的问题,事实证明,如果路由不存在,路由器将什么都不做。我有

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

但我的路由设置为review(无s)
希望这对其他人有帮助

zlwx9yxi

zlwx9yxi3#

对我来说,我没有在app. modal.ts中的声明中导入组件

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  declarations: [
    //make sure your components are declared here
    ResetPasswordConfirmedComponent,
  ],

之后,请确保您导入路由器到组件,它应该工作!
我使用Angular 15。

相关问题