Tham số tuyến đường tùy chọn 2 góc

Có thể có một tham số tuyến tùy chọn trong tuyến Angular 2 không? Tôi đã thử cú pháp Angular 1.x trong RouteConfig nhưng nhận được lỗi dưới đây:

"NGOẠI TRỪ GỐC: Đường dẫn" / user /: id? "Chứa"? "Không được phép trong cấu hình tuyến đường."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

Bạn có thể xác định nhiều tuyến có và không có tham số:

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

và xử lý tham số tùy chọn trong thành phần của bạn:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

Xem thêm vấn đề về github có liên quan: https://github.com/angular/angular/issues35325

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

Bằng cách này, thành phần không được kết xuất lại khi tham số được thêm vào.

Bạn nên sử dụng tham số truy vấn khi thông tin là tùy chọn.

Thông số tuyến hoặc tham số truy vấn?

Không có luật chuyên chế. Nói chung,

thích tham số tuyến khi

• giá trị được yêu cầu.
• giá trị là cần thiết để phân biệt một tuyến đường này với một tuyến đường khác.

thích tham số truy vấn khi

• giá trị là tùy chọn.
• giá trị là phức tạp và / hoặc đa biến.

từ https://angular.io/guide/router#optional-route-parameter

Bạn chỉ cần lấy tham số từ đường dẫn.

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

Angular 4 - Giải pháp để giải quyết thứ tự của tham số tùy chọn:

LÀM CÁI NÀY:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

Lưu ý rằng productsvà products/:idcác tuyến đường được đặt tên chính xác như nhau. Angular 4 sẽ theo đúng productscác tuyến đường không có tham số và nếu tham số thì nó sẽ đi theo products/:id.

Tuy nhiên, con đường cho con đường phi tham số productsphải không có một gạch chéo, nếu góc sẽ không đúng cách đối xử với nó như một tham số-path. Vì vậy, trong trường hợp của tôi, tôi đã có dấu gạch chéo cho các sản phẩm và nó không hoạt động.

ĐỪNG LÀM ĐIỀU NÀY:

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

Câu trả lời của rerezz là khá hay nhưng nó có một lỗ hổng nghiêm trọng. Nó gây ra Userthành phần để chạy lại ngOnInitphương thức.

Nó có thể có vấn đề khi bạn làm một số thứ nặng ở đó và không muốn nó được chạy lại khi bạn chuyển từ tuyến không tham số sang tuyến tham số. Mặc dù hai tuyến này có nghĩa là bắt chước một tham số url tùy chọn, không trở thành 2 tuyến riêng biệt.

Đây là những gì tôi đề nghị để giải quyết vấn đề:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

Sau đó, bạn có thể di chuyển logic chịu trách nhiệm xử lý param cho UserWithParamthành phần và để lại logic cơ sở trong Userthành phần. Bất cứ điều gì bạn làm trong User::ngOnInitsẽ không được chạy lại khi bạn điều hướng từ / user đến / user / 123 .

Đừng quên đặt <router-outlet></router-outlet>trong Usermẫu của.

Các câu trả lời được đề xuất ở đây, bao gồm câu trả lời được chấp nhận từ rerezz , đề xuất thêm nhiều mục tuyến hoạt động tốt.

Tuy nhiên, thành phần sẽ được tạo lại khi thay đổi giữa các mục tuyến, tức là giữa mục nhập tuyến với tham số và mục không có tham số.

Nếu bạn muốn tránh điều này, bạn có thể tạo trình so khớp tuyến đường của riêng bạn sẽ khớp với cả hai tuyến đường:

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

Sau đó sử dụng công cụ đối sánh trong cấu hình tuyến đường của bạn:

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

Với angular4 chúng ta chỉ cần tổ chức các tuyến cùng nhau theo thứ bậc

const appRoutes: Routes = [
  { 
    path: '', 
    component: MainPageComponent 
  },
  { 
    path: 'car/details', 
    component: CarDetailsComponent 
  },
  { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
  },
  { 
    path: 'car/details/:id', 
    component: CadDetailsComponent 
  },
  { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
  }
];

Điều này làm việc cho tôi. Bằng cách này, bộ định tuyến biết tuyến đường tiếp theo dựa trên các tham số id tùy chọn là gì.

Chạy vào một ví dụ khác của vấn đề này, và trong khi tìm kiếm một giải pháp cho nó đã đến đây. Vấn đề của tôi là tôi đang làm những đứa trẻ, và lười tải các thành phần cũng để tối ưu hóa mọi thứ một chút. Tóm lại nếu bạn lười tải mô-đun cha. Điều chính là tôi sử dụng '/: id' trong tuyến đường và nó phàn nàn về '/' là một phần của nó. Không phải vấn đề chính xác ở đây, nhưng nó được áp dụng.

Định tuyến ứng dụng từ cha mẹ

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

Con đường lười tải

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

Tôi không thể nhận xét, nhưng tham chiếu đến: Tham số tuyến đường tùy chọn 2 góc

bản cập nhật cho Angular 6:

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

Xem https://angular.io/api/router/ActivatedRoute để biết thêm thông tin về định tuyến Angular6.

Đối mặt với một vấn đề tương tự với tải lười biếng, tôi đã làm điều này:

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

Và sau đó trong thành phần:

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

Cách này:

• Các tuyến đường mà không /được chuyển hướng đến các tuyến đường với. Bởi vì pathMatch: 'full', chỉ có tuyến đường đầy đủ cụ thể như vậy được chuyển hướng.

• Sau đó, users/:idđược nhận. Nếu con đường thực tế là users/, idlà "", vì vậy kiểm tra xem nó trong ngOnInitvà hành động phù hợp; khác, idlà id và tiến hành.

• Phần còn lại của các thành phần hoạt động trên selectedUserhoặc không được xác định (* ngNếu và những thứ tương tự).