angular - Angular 4+：元素中的 RouterLink无法正常工作

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 {}

Answer 2

对于其他遇到此问题的人，请尝试以下操作：

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

而不是这个：

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

Answer 3

为了解决这个问题，需要在 header.Component.ts 导入的模块中导入 RouterModule 模块。这意味着父模块的这个组件。然后运行 ​​CLI 命令ng serve

例如：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { HeadComponent } from './head/head.component';


@NgModule({
  declarations: [HeadComponent],
  imports: [
    CommonModule,
    RouterModule,

  ],
  exports: [
    CommonModule,
    HeadComponent
  ]
})
export class LayoutModule { }

该解决方案适用于我的 Angular 10 应用程序

Answer 4

好的，我实际上发现了错误，它出现在我从未想过的地方。还有其他不同的行为，例如不工作（单击）事件绑定。所以我浏览了我的 web 项目的配置，它基于来自 github 的这个示例 angular 4 通用 spa： https ://github.com/MarkPieszak/aspnetcore-angular2-universal

1. 我已经从使用 yeoman 工具生成的 ASP NET Core SPA 进行了升级。

npm install -g yo generator-aspnetcore-spa

然后，cd 到您希望项目所在的空目录，然后按如下方式运行 Yeoman：

yo aspnetcore-spa

2. 然后我注意到在使用服务器端预渲染时不可能轻松使用 Leaflet Open Street Maps。

3. 所以从 Angular 2+ -> Angular 4+ 升级，购买修改每个文件配置、模块、启动、webpack、tsconfig 等文件。我真的对 github 下的这个入门项目印象深刻：
   https ://github.com/MarkPieszak/aspnetcore-angular2-universal

4. 一天结束时，我注意到我仍然保留了一些旧代码，我认为它们可以正常运行：

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

而新版本的 Angular 通用项目中看起来相似的正确的应该是：

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS。以前我也做了替换platformUniversalDynamic => platformBrowserDynamic.

Answer 5

从上一个答案过去多年后，我不容易找到正确的答案。另外，我观察到一些错误的答案。因此，我想在 Angular 8++ 组件的 HTML 文件中添加有关 routerlink 使用的清晰描述。将路由路径添加到 routingmodule 后，为了在 Angular 组件中使用此路由：

1. 导入已声明模块组件的 RouterModule
2. 在 HTML 中设置路由到 routerLink。由于 routerLink 区分大小写，请注意不要使用 routerlink。

不需要将导航链接类或导入路由器添加到您的组件。