带有星号的Angular 6路由答案

【问题标题】：Angular 6 routing with asterisk带有星号的Angular 6路由
【发布时间】：2018-06-07 11:26:41
【问题描述】：

目前我有一个简单的 Angular 6 项目。在应用路由模块中，我刚刚将路由配置为星号以指向我自己的 CmsComponent。

app.routing.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { CmsComponent } from './cms/cms.component';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [
  {path: '**', component: CmsComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HttpClientModule
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {

}

在 html 部分，这基本上是我所拥有的：

  <div class="banner">
    <nav>
      <ul>
        <li *ngFor="let nav of navItems"><a routerLink="{{nav.url}}">{{nav.title}}</a></li>
      </ul>
    </nav>
  </div><!-- banner -->

但是当我点击一个链接时，内容并没有顺利更新，只能硬刷新。我猜这与 Route 路径中的星号有关？

因为当我将路径从 ** 更改为静态标题/网址时，一切正常。

我已经尝试将 url 推送到路由，但我宁愿寻找可以与 ** 一起使用的东西。最好的方法是什么？

【问题讨论】：

你需要根据你的路由文件中的rounderlink制作另一个路由器。
path: '**' 适用于应用程序出现 404 错误代码的情况。

标签： angular url routing

【解决方案1】：

您需要在您的路由变量中定义 nav.url 的所有值。像这样。

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  { path: '**', redirectTo: 'home', pathMatch:'full' }
];

【讨论】：