Açısal 2 isteğe bağlı rota parametresi

Açısal 2 yolunda isteğe bağlı bir rota parametresine sahip olmak mümkün müdür? RouteConfig Açısal 1.x sözdizimi denedim ama aşağıdaki hata aldı:

"ORİJİNAL İSTİSNA: Yol" / kullanıcı /: id? ", Bir rota yapılandırmasında izin verilmeyen"? "İçeriyor."

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

Parametre ile veya parametre olmadan birden fazla rota tanımlayabilirsiniz:

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

ve bileşeninizde isteğe bağlı parametreyi kullanın:

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

    if (paramId) {
        ...
    }
}

Ayrıca ilgili github sorununa da bakın: https://github.com/angular/angular/issues/3525

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

Bu şekilde, parametre eklendiğinde bileşen yeniden oluşturulmaz.

Bilgiler isteğe bağlı olduğunda bir sorgu parametresi kullanılması önerilir.

Rota Parametreleri veya Sorgu Parametreleri?

Zor ve hızlı bir kural yoktur. Genel olarak,

Aşağıdaki durumlarda rota parametresini tercih edin

• değer gereklidir.
• değer bir rota yolunu diğerinden ayırmak için gereklidir.

Aşağıdaki durumlarda bir sorgu parametresi tercih edin

• değer isteğe bağlıdır.
• değer karmaşık ve / veya çoklu-değişkendir.

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

Parametreyi rota yolundan çıkarmanız yeterlidir.

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

Açısal 4 - İsteğe bağlı parametrenin sırasını ele almak için çözüm:

BUNU YAP:

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

productsVe products/:idyollarının aynı şekilde adlandırıldığını unutmayın . Açısal 4, productsparametresiz rotalar için doğru bir şekilde takip eder ve eğer bir parametre varsa takip eder products/:id.

Bununla birlikte, sigara parametre yoldan yolunu productsgerekir değil , bir eğik çizgi, başka türlü açısal yanlış bir parametre-yolu olarak algılar. Benim durumumda, ürünler için sondaki eğik çizgi vardı ve işe yaramadı.

BUNU YAPMAYIN:

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

rerezz'un cevabı oldukça güzel ama ciddi bir kusuru var. UserBileşenin ngOnInityöntemi yeniden çalıştırmasına neden olur .

Orada bazı ağır şeyler yaptığınızda sorunlu olabilir ve parametrik olmayan rotadan parametrik olana geçtiğinizde yeniden çalıştırılmasını istemezsiniz. Bu iki yolun isteğe bağlı bir url parametresini taklit etmesine rağmen, 2 ayrı yol haline gelmez.

Sorunu çözmek için önerdiğim şey:

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

Ardından, parametrenin işlenmesinden sorumlu mantığı taşıyabilir UserWithParamve temel mantığı bileşende bırakabilirsiniz User. İçinde yaparsanız yapın User::ngOnInitsiz gittiğinizde tekrar çalıştırmak olmayacak / kullanıcı için / kullanıcı / 123 .

Koymak unutma <router-outlet></router-outlet>içinde Userbireyin şablona.

Dahil Burada önerilen cevaplar, kabul edilen cevabını gelen rerezz birden rota girişleri çalışma cezası eklemenizi öneririz.

Ancak bileşen, rota girişleri arasında, yani parametreli rota girişi ile parametresiz giriş arasında değişiklik yaparken yeniden oluşturulur.

Bundan kaçınmak istiyorsanız, her iki güzergahla da eşleşen kendi güzergah eşleştiricinizi oluşturabilirsiniz:

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

Ardından rota yapılandırmanızdaki eşleştiriciyi kullanın:

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

Angular4 ile rotaları hiyerarşide birlikte organize etmemiz gerekiyor

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

Bu benim için çalışıyor. Bu şekilde yönlendirici, seçenek kimliği parametrelerine dayalı olarak bir sonraki yolun ne olduğunu bilir.

Bu sorunun başka bir örneğiyle karşılaştım ve bunun çözümü için buraya geldi. Benim sorunum, şeyleri biraz optimize etmek için çocukları ve bileşenlerin tembel yüklemesini yapıyordum. Kısacası ana modülü yüklerken tembelseniz. Önemli olan rotada '/: id' kullanmamdı ve '/' bunun bir parçası olmakla ilgili şikayetler. Burada tam bir sorun değil, ama geçerli.

Üst öğeden uygulama yönlendirmesi

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

Çocuk yolları tembel yüklendi

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

Yorum yapamıyorum, ancak referans olarak: Açısal 2 isteğe bağlı rota parametresi

Açısal 6 için bir güncelleme:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Angular6 yönlendirme hakkında ek bilgi için https://angular.io/api/router/ActivatedRoute adresine bakın .

Tembel yükleme ile benzer bir sorunla karşılaştım bunu yaptım:

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

Ve sonra bileşende:

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

Bu yoldan:

• Olmadan rota /ile rotaya yönlendirilir. Bu nedenle pathMatch: 'full', yalnızca bu tür tam yol yeniden yönlendirilir.

• Sonra users/:idalınır. Gerçek rota ise users/, idolduğu "", yani içinde kontrol ngOnInitve buna göre hareket; başka, idid ve devam.

• Bileşenlerin geri kalanı etkisizdir selectedUserveya tanımlanmamıştır (* ngIf ve bunun gibi şeyler).