Các tuyến khác nhau cùng một thành phần

Question

Tôi muốn đạt được một cái gì đó như thế này /products cho thấy tất cả các sản phẩm và /products/:category hiển thị tất cả các sản phẩm liên quan đến một danh mục cụ thể. Để đạt được điều đó tôi có các tuyến đường sau:

const productsRoutes: Routes = [ 
    { 
    path: 'products', 
    component: ProductsComponent, 
    children: [ 
     { 
     path: '', 
     component: ProductsListComponent, 
     }, 
     { 
     path: ':category', 
     component: ProductsListComponent 
     } 
    ] 
    } 
]; 

Vấn đề

Khi tôi chuyển đổi giữa các loại, mọi thứ đều tốt, khi tôi chuyển đổi giữa tất cả các sản phẩm và các sản phẩm thể loại, và ngược lại, redraws kiễu góc các thành phần và có một nhấp nháy.

Phiên bản cuối cùng của Bộ định tuyến góc 2 không có Regex, như tôi biết. Có cái gì mà tôi đang thiếu, hoặc bây giờ đây là giải pháp duy nhất?

Answer 1

Tôi không biết có cách nào khác để thực hiện việc này hay không nhưng tôi đã cố gắng làm cho nó hoạt động bằng cách sử dụng bản hack sau.

export const productsRoutes: Route[] = [ 
    { 
     path: 'products', 
     component: ProductsComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'prefix', 
       component: ProductsListComponent, 
       children: [ 
        { 
         path: '', 
         component: EmptyComponent, 
        }, 
        { 
         path: ':category', 
         component: EmptyComponent, 
        }, 
       ], 
      }, 
     ], 
    }, 
]; 

EmptyComponent:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'GemainEmpty', 
    template: '<router-outlet></router-outlet>', 
}) 
export class EmptyComponent { 
} 

tuyến đường Xử lý những thay đổi trên ListComponent:

ngOnInit() { 
    this.routerEventsSubscription = this.router.events.subscribe((evt) => { 
     if (!(evt instanceof NavigationEnd)) { 
      return; 
     } 
     //Code to reload/filter list 
    } 
} 

Và thêm một ổ cắm bộ định tuyến trên mẫu ListComponent.

Answer 2

Bạn cũng có thể xác định được chuyển hướng sang một con đường cụ thể:

{ path: '**', redirectTo: '/home', pathMatch: 'full' }, 

nơi /home là con đường bạn muốn chuyển hướng đến.

path: '**' giải quyết tất cả những con đường mà không được định nghĩa

Answer 3

bạn có thể giải quyết nó bằng cách thêm các tuyến đường

const routes: Routes = [ 
    { path: 'experience', 
     children: [ 
      { path: 'pending', component: ExperienceComponent }, 
      { path: 'requests', component: ExperienceComponent }, 
     ] }] 

và trong ExperienceComponent nhập khẩu

import { ActivatedRoute } from "@angular/router"; 

và trong constructor thêm tham số này

constructor(public route: ActivatedRoute) 

và bên trong constructor get url

this.route.url.subscribe(params => { 
    console.log(params[0].path); 
})