Parameter rute opsional sudut 2

Apakah mungkin untuk memiliki parameter rute opsional di rute Angular 2? Saya mencoba sintaks Angular 1.x di RouteConfig tetapi menerima kesalahan di bawah ini:

"PENGECUALIAN ASLI: Jalur" / user /: id? "Berisi"? "Yang tidak diizinkan dalam konfigurasi rute."

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

Anda dapat menentukan beberapa rute dengan dan tanpa parameter:

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

dan menangani parameter opsional di komponen Anda:

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

    if (paramId) {
        ...
    }
}

Lihat juga masalah github terkait: https://github.com/angular/angular/issues/3525

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

Dengan cara ini komponen tidak dirender ulang ketika parameter ditambahkan.

Dianjurkan untuk menggunakan parameter kueri ketika informasi tersebut opsional.

Parameter Rute atau Parameter Kueri?

Tidak ada aturan yang keras dan cepat. Secara umum,

lebih suka parameter rute saat

• nilai diperlukan.
• nilai diperlukan untuk membedakan satu jalur rute dari yang lain.

lebih suka parameter kueri saat

• nilainya opsional.
• nilainya kompleks dan / atau multi-variate.

dari https://angular.io/guide/router#optional-route-parameters

Anda hanya perlu mengambil parameter dari jalur rute.

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

Angular 4 - Solusi untuk mengatasi pemesanan parameter opsional:

MELAKUKAN HAL INI:

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

Perhatikan bahwa productsdan products/:idrute diberi nama yang persis sama. Sudut 4 akan mengikuti dengan benar productsuntuk rute tanpa parameter, dan jika parameter itu akan mengikuti products/:id.

Namun, jalur untuk rute non-parameter tidakproducts boleh memiliki garis miring, jika tidak, sudut akan memperlakukannya sebagai jalur-parameter. Jadi dalam kasus saya, saya memiliki garis miring untuk produk dan itu tidak berhasil.

JANGAN LAKUKAN INI:

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

Jawaban rerezz cukup bagus tetapi memiliki satu kelemahan serius. Itu menyebabkan Userkomponen menjalankan kembali ngOnInitmetode.

Mungkin bermasalah ketika Anda melakukan beberapa hal yang berat di sana dan tidak ingin itu dijalankan kembali ketika Anda beralih dari rute non-parametrik ke yang parametrik. Meskipun kedua rute tersebut dimaksudkan untuk meniru parameter url opsional, tidak menjadi 2 rute terpisah.

Inilah yang saya sarankan untuk menyelesaikan masalah:

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

Kemudian Anda dapat memindahkan logika yang bertanggung jawab untuk menangani param ke UserWithParamkomponen dan meninggalkan logika dasar dalam Userkomponen. Apa pun yang Anda lakukan User::ngOnInittidak akan berjalan lagi ketika Anda menavigasi dari / pengguna ke / pengguna / 123 .

Jangan lupa untuk menempatkan <router-outlet></router-outlet>di User's Template.

Jawaban yang disarankan di sini, termasuk jawaban yang diterima dari rerezz yang menyarankan menambahkan beberapa entri rute berfungsi dengan baik.

Namun komponen akan dibuat kembali ketika mengubah antara entri rute, yaitu antara entri rute dengan parameter dan entri tanpa parameter.

Jika Anda ingin menghindari ini, Anda dapat membuat pencocokan rute Anda sendiri yang akan cocok dengan kedua rute:

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);
 }

Kemudian gunakan pencocokan dalam konfigurasi rute Anda:

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

Dengan angular4 kita hanya perlu mengatur rute bersama dalam hierarki

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 
  }
];

Ini bekerja untuk saya. Dengan cara ini router mengetahui apa rute berikutnya berdasarkan parameter id opsi.

Berlari ke contoh lain dari masalah ini, dan dalam mencari solusi untuk itu datang ke sini Masalah saya adalah saya mengerjakan anak-anak, dan malas memuat komponen juga untuk mengoptimalkan beberapa hal. Singkatnya jika Anda malas memuat modul induk. Hal utama adalah saya menggunakan '/: id' di rute, dan keluhan tentang '/' menjadi bagian dari itu. Bukan masalah sebenarnya di sini, tetapi itu berlaku.

Perutean aplikasi dari induk

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

Rute anak dimuat malas

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

Saya tidak bisa berkomentar, tetapi mengacu pada: Angular 2 parameter rute opsional

pembaruan untuk Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Lihat https://angular.io/api/router/ActivatedRoute untuk informasi tambahan tentang perutean Angular6.

Menghadapi masalah serupa dengan lazy loading, saya telah melakukan ini:

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

Dan kemudian di komponen:

  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);
  }

Cara ini:

• Rute tanpa /diarahkan ke rute dengan. Karena itu pathMatch: 'full', hanya rute lengkap khusus tersebut yang dialihkan.

• Lalu, users/:idditerima. Jika rute yang sebenarnya adalah users/, idadalah "", jadi dalam ngOnInitdan bertindak sesuai; selain itu, idadalah id dan melanjutkan.

• Komponen lainnya yang aktif selectedUseratau tidak terdefinisi (* ngIf dan hal-hal seperti itu).