Угловая 6 маршрутизация со звездочкой

Question

На данный момент у меня простой угловой проект 6.В модуле app-routing я только что настроил маршруты как звездочки, чтобы они указывали на мой собственный 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 -->

Но когда я нажимаю на ссылку, контент не обновляется плавно, только при жестком обновлении.Я полагаю, это как-то связано со звездочками в путях маршрутов?

Потому что, когда я меняю пути с ** на статические заголовки / URL-адреса, все работает нормально.

Я пытался нажатьURL к маршрутам, но я бы предпочел поискать что-то, с чем можно работать **.Какой будет лучший подход?

Answer 1

Вам необходимо определить в вашей переменной маршрута все значение nav.url.Как то так.

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