कोणीय 2 वैकल्पिक मार्ग पैरामीटर

Question

क्या एंगुलर 2 रूट में वैकल्पिक मार्ग पैरामीटर होना संभव है? मैंने रूटकॉन्फिग में कोणीय 1.x सिंटैक्स की कोशिश की, लेकिन नीचे त्रुटि प्राप्त हुई:

"मूल अपवाद: पथ" / उपयोगकर्ता /: आईडी? "समाहित है"? "जो मार्ग विन्यास में अनुमति नहीं है।"

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

Answer 1

आप बिना पैरामीटर के कई मार्गों को परिभाषित कर सकते हैं:

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

और अपने घटक में वैकल्पिक पैरामीटर को संभालें:

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

    if (paramId) {
        ...
    }
}

संबंधित गितुब मुद्दा भी देखें: https://github.com/angular/angular/issues/3525

Comments

सही होने पर मुझे सही करें, लेकिन यह समाधान मेरे लिए केवल तभी काम करता है जब सरणी में मार्गों का क्रम उलट जाता है, अर्थात पैरामीटर वाला मार्ग दूसरे से पहले होता है। जब तक मैंने ऐसा नहीं किया, राउटर केवल पैरामीटर के बिना मार्ग से मेल खाता था।

— एविएड पी।

क्या यह समाधान अभी भी लागू होता है? मैंने देखा कि "उपयोगकर्ता" से "UserNew" की ओर बढ़ना 'उपयोगकर्ता' घटक को फिर से इंस्टेंट करेगा

— teleaziz

पुराने लेकिन इस दृष्टिकोण के साथ एक बड़ी समस्या यह है कि प्रत्येक मार्ग को अद्वितीय मार्ग के रूप में माना जाता है और यह घटक के पुन: उपयोग को असंभव बनाता है।

— एगनी

जैसा कि @teleaziz ने नोट किया है, पैरामीटर को जोड़ना घटक को फिर से प्रस्तुत करेगा। इससे बचने के लिए, मार्टिन क्रेमर का जवाब; रिक्त पैरामीटर मान के साथ 'रीडायरेक्टो' रूट को जोड़ने पर, मेरे लिए बहुत अच्छा काम किया: stackoverflow.com/a/49159166/1364650 - लेकिन यह काफी हैकरी है, मुझे लगता है कि उन्हें वैकल्पिक मार्ग मापदंडों का ठीक से समर्थन करना चाहिए।

— विंसेंट सेल्स

जो लोग क्यों सोच रहे हैं के लिए RouteParams: घटक की जांच करने के लिए आयात नहीं इस stackoverflow.com/a/36792261/806202 । समाधान का उपयोग करना है ActivatedRoute:route.snapshot.params['routeParam']

— आर्सेन खाचरतन

Answer 2

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

जब पैरामीटर जोड़ा जाता है तो इस तरह से घटक को फिर से प्रस्तुत नहीं किया जाता है।

Comments

यह उत्तर सबसे अच्छा है। यह एक ही घटक को फिर से प्रस्तुत नहीं करता है और इसे कई घटकों की आवश्यकता नहीं होती है।

— रेक्स

सबसे अच्छा जवाब है, लेकिन मैंने pathMatch: 'full'पुनर्निर्देशित किया, अन्यथा users/adminमेरे मामले में भी पथ को पुनर्निर्देशित किया गया है

— Valeriy Katkov

यह उत्तर केवल तभी सबसे अच्छा है जब आप अपने URL पर ब्राउज़र में देखे गए स्लैश के साथ ठीक हैं। शायद एक मूल्य पर विचार करें जो 'अपरिभाषित आईडी' का प्रतिनिधित्व करता है, उदाहरण के लिए /users/allया /users/home, 'सभी' या 'घर' को पढ़ें idऔर इसे अनदेखा करें यदि यह आपके जादू के मूल्य से मेल खाता है। फिर ऊपर की पहली पंक्ति redirectTo: 'users/home'या जो भी आप तय करते हैं। मेरे लिए एक अनुगामी स्लेश वास्तव में कुछ गलत होने के रूप में बाहर खड़ा है।

— सिमोन_विवर

@Simon_Weaver मैं सहमत हूं। मुझे एक मैचर का उपयोग करके एक और समाधान मिला, जिसमें यह समस्या नहीं है: stackoverflow.com/a/56391974/664533

— वेन मौरर

यह एक सरल मंत्र है, लेकिन काफी अटूट है: सबसे अच्छा समाधान!

— वेरि

Answer 3

जानकारी वैकल्पिक होने पर क्वेरी पैरामीटर का उपयोग करने की अनुशंसा की जाती है।

मार्ग पैरामीटर या क्वेरी पैरामीटर?

कोई कठिन-व्रत नियम नहीं है। सामान्य रूप में,

जब एक मार्ग पैरामीटर पसंद करते हैं

• मान आवश्यक है
• मान एक मार्ग पथ को दूसरे से अलग करने के लिए आवश्यक है।

जब कोई क्वेरी पैरामीटर पसंद करते हैं

• मूल्य वैकल्पिक है।
• मान जटिल और / या बहु-चर है।

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

आपको बस मार्ग पथ से पैरामीटर निकालने की आवश्यकता है।

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

Comments

वैकल्पिक मार्ग परिमार्जक घटकों को बदलना, लेकिन क्वेरीपार्म्स को बदलना नहीं है। यदि आप रूट नेविगेशन से पहले कुछ डेटा को हल करते हैं, तो यह वैकल्पिक मार्ग पराम बदलने पर हर बार अनुरोध किया जाएगा।

— राकहत

FYI करें, वह लंगर लिंक अब काम नहीं करता है। नया लिंक रूट पैरामीटर्स

— spottedmahn

Answer 4

कोणीय 4 - वैकल्पिक पैरामीटर के आदेश को संबोधित करने के लिए समाधान:

यह करो:

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

ध्यान दें कि productsऔर products/:idमार्गों को समान रूप से नामित किया गया है। कोणीय 4 सही ढंग productsसे बिना पैरामीटर वाले मार्गों के लिए अनुसरण करेगा , और यदि कोई पैरामीटर इसका पालन करेगा products/:id।

हालांकि, गैर-पैरामीटर मार्ग के लिए पथ में अनुगामी स्लैश नहींproducts होना चाहिए , अन्यथा कोणीय गलत तरीके से इसे पैरामीटर-पथ के रूप में माना जाएगा। तो मेरे मामले में, मैं उत्पादों के लिए अनुगामी स्लेश था और यह काम नहीं कर रहा था।

यह मत करो:

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

Comments

यदि दोनों ProductComponent पर जा रहे हैं, तो आप वहां वैकल्पिक पैरामीटर के साथ कैसे व्यवहार करते हैं?

— अरविन

आप इस तरह से ProductsComponent में अनुरोधित id: id1, id2, आदि मापदंडों के साथ-साथ url को एक्सेस कर सकते हैं: this.route.url.first () (। Url) => {// कंसोल .log ('1)। url परिवर्तन का पता चला '+ url); इसे वापस लौटाएँ। इस' route.params.do ((params) => {// कंसोल.लॉग ('2: url + params परिवर्तन का पता चला' + params ["id1"] + '+' params ["id2"]); this.id1 = params ["id1"]; this.id2 = params ["id2"];})})

— ObjectiveTC

याद रखें आप dataघटक को भी पास कर सकते हैं, जो प्रत्येक घटक के लिए समान घटक के लिए भी भिन्न हो सकते हैं। उदाहरण {path: 'products', component: ProductsComponent, data: { showAllProducts: true} },का इस्तेमाल किया जा सकता है और फिर आप जांच कर सकते हैं showAllProducts। थोड़ा अच्छा तो एक शून्य के लिए जाँच, लेकिन सरल मामलों के लिए या तो शायद ठीक है।

— सिमोन_विवर

दुर्भाग्य से, यह समाधान एंगुलर को उत्पादों और उत्पादों / आईडी के बीच घटक का पुन: उपयोग करने से रोकेगा। घटक फिर से स्थापित किया जाएगा।

— कोडियाक

@ कोडीक - मेरा मानना ​​है कि यह सही नहीं है। मेरी समझ यह है कि app.module.ts में, ProductsComponent को एक बार इंस्टेंट किया जाता है, और कोणीय इंजन फिर उस नेवी प्रोडक्टComponent को प्रत्येक नेविगेबल इवेंट (उत्पादों और उत्पादों / आईडी आदि) पर फिर से उपयोग करता है। क्या आप समझा सकते हैं या प्रदर्शित कर सकते हैं कि ऊपर दिए गए कोड में ProductComponent को कैसे फिर से इंस्टेंट किया जा सकता है, और आप फिर से इंस्टेंटेशन को कैसे रोक सकते हैं?

— ObjectiveTC

Answer 5

rerezz का उत्तर बहुत अच्छा है, लेकिन इसमें एक गंभीर दोष है। यह Userघटक को फिर से चलाने के लिए घटक का कारण बनता है ngOnInit।

समस्या हो सकती है जब आप वहां कुछ भारी सामान करते हैं और यह नहीं चाहते कि जब आप गैर-पैरामीट्रिक मार्ग से पैरामीट्रिक एक पर जाएं तो इसे फिर से चलाया जाए। हालांकि वे दो मार्ग वैकल्पिक url पैरामीटर की नकल करने के लिए हैं, 2 अलग मार्ग नहीं बनते हैं।

यहाँ मैं समस्या को हल करने का सुझाव देता हूँ:

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

तब आप पैरामीटर को UserWithParamघटक से निपटने के लिए जिम्मेदार तर्क को स्थानांतरित कर सकते हैं और घटक में आधार तर्क छोड़ सकते Userहैं। जो कुछ भी आप में क्या User::ngOnInitहै जब आप से नेविगेट फिर से चलाने के नहीं की जाएगी / उपयोगकर्ता के लिए / उपयोगकर्ता / 123 ।

के खाके <router-outlet></router-outlet>में रखना मत भूलना User।

Comments

यदि प्रदर्शन महत्वपूर्ण है, तो घटक को फिर से बनाए जाने से बचना अच्छी बात है। मेरे पास एक और उपाय है जो बच जाता है और फिर से बनाए जाने वाले घटक से बच जाता है: stackoverflow.com/a/56391974/664533

— वेन मौरर

Answer 6

यहाँ सुझाए गए उत्तर, रेज़र से स्वीकृत उत्तर सहित, जिसमें कई रूट प्रविष्टियों को जोड़ने का सुझाव दिया गया है, ठीक काम करते हैं।

हालांकि घटक प्रविष्टियों को रूट प्रविष्टियों के बीच बदलते हुए, अर्थात पैरामीटर के साथ मार्ग प्रविष्टि और पैरामीटर के बिना प्रविष्टि के बीच फिर से बनाया जाएगा।

यदि आप इससे बचना चाहते हैं, तो आप अपना मार्ग मिलान बना सकते हैं जो दोनों मार्गों से मेल खाएगा:

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

फिर अपने मार्ग के विन्यास में मिलानकर्ता का उपयोग करें:

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

Comments

@KevinBeal मैंने काफी कुछ मैचर्स को लागू किया है जो एओटी के साथ काम करते हैं। आपको यहाँ क्या त्रुटि हो रही है?

— वेन मौरर

उफ़। यह कुछ और था। मेरा मिलान एओटी के साथ काम करता है।

— केविन बील

यह थोड़ा मुश्किल है लेकिन इस समस्या का सबसे अच्छा समाधान है

— fedor.belov

Answer 7

कोणीय 4 के साथ हमें बस पदानुक्रम में एक साथ मार्गों को व्यवस्थित करने की आवश्यकता है

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

यह मेरे लिए काम करता है। इस तरह से राउटर जानते हैं कि ऑप्शन आईडी मापदंडों के आधार पर अगला मार्ग क्या है।

Answer 8

इस समस्या का एक और उदाहरण है, और इसके समाधान की तलाश में यहां आया। मेरा मुद्दा यह था कि मैं बच्चों को कर रहा था, और घटकों के आलसी लोडिंग के साथ-साथ चीजों को थोड़ा अनुकूलित करने के लिए। संक्षेप में यदि आप मूल मॉड्यूल लोड करने में आलसी हैं। मुख्य बात यह थी कि मार्ग में '/: id' का उपयोग किया गया था, और यह '/' का एक हिस्सा होने के बारे में शिकायतें हैं। यहां सटीक समस्या नहीं है, लेकिन यह लागू होता है।

माता-पिता से ऐप-रूटिंग

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

बाल मार्ग आलसी लोडेड

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

Answer 9

मैं टिप्पणी नहीं कर सकता, लेकिन इसके संदर्भ में: कोणीय 2 वैकल्पिक मार्ग पैरामीटर

Angular 6 के लिए एक अपडेट:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Angular6 रूटिंग की अतिरिक्त जानकारी के लिए https://angular.io/api/router/ActivatedRoute देखें ।

Answer 10

आलसी लोडिंग के साथ एक समान समस्या का सामना करते हुए मैंने ऐसा किया है:

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

और फिर घटक में:

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

इस तरफ:

• बिना मार्ग के मार्ग /को पुनर्निर्देशित किया गया है। के कारण pathMatch: 'full', केवल ऐसे विशिष्ट पूर्ण मार्ग को पुनर्निर्देशित किया गया है।

• तब, users/:idप्राप्त होता है। यदि वास्तविक मार्ग था users/, idहै "", तो ngOnInitउसके अनुसार जांच करें और उसके अनुसार कार्य करें; और, idआईडी और आगे बढ़ना है।

• बाकी पोटेंसी कृतियां selectedUserअपरिभाषित हैं या नहीं (* ngIf और उस तरह की चीजें)।