угловой вопрос на ленивом маршруте - PullRequest
Новая
       76

угловой вопрос на ленивом маршруте

2 голосов
/ 29 сентября 2019

Я новичок в угловых и гуглил часами, чтобы найти решение на ленивом маршруте.https://stackblitz.com/edit/angular-7jmk87

app-routing.module.ts 

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
  { path: 'customers', loadChildren: './pages/customers/customers.module#CustomersModule' }
];

customer-routing.module.ts 

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    { path: 'detail', component: CustomerDetailComponent },
];

я хочу перенаправить на /customers/detail с /customers, но он возвращает ошибку типа Cannot match any routes. URL Segment: 'detail'.Я следую некоторым примерам, но это еще не решено.Я надеюсь, что кто-то может помочь мне.Спасибо.

Ответы [ 3 ]

3 голосов
/ 29 сентября 2019

Вы можете использовать одну из следующих опций:

1) полный URL-адрес страницы 

routerLink="/customers/detail"

2) относительный URL с ./

routerLink="./detail"

3) относительный URL без косой черты в начале 

routerLink="detail"

В двух последних вариантах маршрутизатор будет искать дочерние элементы текущего активированного маршрута.

См. Также Документация по RouterLink

1 голос
/ 29 сентября 2019

вы можете использовать routerLink для навигации, как показано ниже: 

<a [routerLink]="[ '../detail' ]">Redirect To Detail-1</a>

и 

<a [routerLink]="[ 'detail' ]">Redirect To Detail-2</a>

Оба они верны.

или

В конструкторе клиентского компонента внедрить следующий сервис:

Router, ActivatedRoute

constructor(
  private router: Router,
  private route: ActivatedRoute) { }

Тогда, если вы хотите перенаправить на подробный компонент с событием (click),используйте следующее: 

<a (click)="redirectToDetail()"> Redirect To Detail </a>
redirectToDetail() {
  this.router.navigate(['../detail'], { relativeTo: this.route })
}
0 голосов
/ 29 сентября 2019

Если вы хотите использовать Ленивый маршрут, вам нужно определить customer-routing.moudule, как показано ниже: - 

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    children :[{ path: 'detail', component: CustomerDetailComponent }]    
];

И ваша ссылка маршрутизатора будет customers/detail в вашей HTML-части.

Надеюсь, это поможет вам.

...