Question

I have placed my AppRoutingModule inside imports of @NgModule of AppModule class.

AppRoutingModule is defined in such way:

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

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

I have placed <router-outlet></router-outlet> in the app.component.html.

Pages displays correctly based on URLs:

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

The problem is in my header.component.ts where I am trying to add routerLink to home page. I have tried such solutions:

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

Firstly when I placed routerLink in <img> element such directive hasn't been found. Then in <a> element it makes casual <a href="/home"> from routerLink and makes full page reloading ! Shouldn't it reload only content of <router-outlet>?

Maybe it has some meaning that my layout looks like this:

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

and routerLink is placed on element in children component <header-bar> (logo) and should navigate on <router-outlet> in its parent?

But I have also tested this behaviour using routerLinks placed directly inside AppComonent and nothing has changed! RouterLink still reloads the webpage!:

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>

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

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

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

npm install -g yo generator-aspnetcore-spa

然后，cd到你希望你的项目去的空目录，和   然后按如下方式运行Yeoman：
yo aspnetcore-spa

然后我注意到在使用服务器端预渲染时无法轻松使用Leaflet Open Street Maps。
因此从Angular 2+升级 - ＆gt; Angular 4+，购买修改每个文件配置，模块，启动，webpack，tsconfig等文件。我真的对github下的这个初学者项目印象很深：
https://github.com/MarkPieszak/aspnetcore-angular2-universal
在一天结束时，我注意到我仍然保留了一些旧代码，我认为这些代码将正常运行：

// 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);
}

新版角度通用项目中看起来相似的正确应该是：

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

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

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

Answer 3

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

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

代替此：

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

Answer 4

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

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

不需要添加nav-link类或将路由器导入到您的组件中。

Answer 5

要解决这个问题，需要在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 应用程序

Angular 4+：<a> element not working properly

5 个答案: