Angular 角度4+；：路由器链接输入<；a>；元件工作不正常

我已将我的

AppRoutingModule

放入

AppModule

类的

@NgModule

的

imports

中

批准模块的定义如下：

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

我已将

放在app.component.html中

页面根据URL正确显示：

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

问题出在header.component.ts中，我试图将routerLink添加到主页。我尝试过这样的解决办法：

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

课程提供
不存在

您需要更多才能使路由正常工作。下面是您的

批准模块

文件的外观

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

---

好吧，我真的发现了这个错误，它就在我从来没有想到过的地方。还有其他不同的行为，如不工作（单击）事件绑定。因此，我介绍了基于github的angular 4 universal spa示例的web项目的配置：

我已经从用yeoman工具生成的ASP NET核心SPA进行了升级

npm安装-g yo发电机aspnetcore spa

然后，将cd刻录到一个空目录中，您希望将项目放在其中，然后 然后按如下方式运行Yeoman：

yo aspnetcore-spa

然后我注意到，在使用服务器端预渲染时，不可能轻松使用单张开放街道地图

所以从Angular 2+->Angular 4+升级，购买并修改每个文件配置、模块、引导、网页包、tsconfig等文件。我对github下的这个启动项目印象深刻：

一天结束时，我注意到我仍然保留了一些我认为可以正确运行的旧代码：

在angular universal project的新版本中，看起来相似的正确版本应该是：

---

注：之前我还替换了

platformUniversalDynamic=>platformBrowserDynamic。

如果其他人有此问题，请尝试以下方法：

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

与此相反：

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

---

距离上次答案已经过去了很多年，我很难找到正确的答案。而且，我发现了一些错误的答案。因此，我想在Angular 8++组件的HTML文件中添加关于routerlink用法的清晰描述。将路由器路径添加到routingmodule后，为了在角组件中使用此路由：

导入已向其声明模块组件的RouterModule

在HTML中将路由设置为routerLink。由于routerLink区分大小写，请小心不要使用routerLink

---

不需要向组件添加导航链接类或导入路由器。

要解决此问题，需要在header.component.ts imported module中导入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应用程序

您是否已将RouterModule导入到包含header.component的模块中？您是否阅读了？尝试类似的方法您还可以确保正确设置了

base href

。当我显示页面源代码时，我在HTML标题部分有这样的代码。我有这样一个代码，我缩短了它，并且没有包含类定义。路由工作，即当我键入：localhost:5000/lesson时，它会正确重定向。但使用routerLink=“”创建的链接似乎会使整个页面重新加载。我认为该页面完全重新加载，因为web浏览器重新加载指示器正在激活并更改为“X”按钮因为路径匹配时路由配置指定重定向”空字符串精确重定向会导致浏览器重新加载页面以导航到指定的url

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

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

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

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

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