พารามิเตอร์เส้นทางเสริม Angular 2

เป็นไปได้หรือไม่ที่จะมีพารามิเตอร์เส้นทางทางเลือกในเส้นทาง Angular 2 ฉันลองใช้ไวยากรณ์ Angular 1.x ใน RouteConfig แต่ได้รับข้อผิดพลาดด้านล่าง:

"ข้อยกเว้นเดิม: เส้นทาง" / ผู้ใช้ /: id? "มี"? "ซึ่งไม่ได้รับอนุญาตในการกำหนดค่าเส้นทาง

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

คุณสามารถกำหนดหลายเส้นทางโดยมีและไม่มีพารามิเตอร์:

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

และจัดการพารามิเตอร์ทางเลือกในองค์ประกอบของคุณ:

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

    if (paramId) {
        ...
    }
}

ดูเพิ่มเติมที่ปัญหา GitHub ที่เกี่ยวข้อง: https://github.com/angular/angular/issues/3525

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

วิธีนี้คอมโพเนนต์จะไม่ถูกเรนเดอร์อีกครั้งเมื่อมีการเพิ่มพารามิเตอร์

ขอแนะนำให้ใช้พารามิเตอร์ข้อความค้นหาเมื่อมีข้อมูลหรือไม่ก็ได้

พารามิเตอร์เส้นทางหรือพารามิเตอร์การสืบค้น

ไม่มีกฎที่ยากและรวดเร็ว โดยทั่วไปแล้ว

ชอบพารามิเตอร์เส้นทางเมื่อ

• จำเป็นต้องมีค่า
• ค่าจำเป็นต้องแยกแยะเส้นทางเส้นทางหนึ่งจากเส้นทางอื่น

ต้องการพารามิเตอร์เคียวรีเมื่อ

• ค่าเป็นทางเลือก
• ค่ามีความซับซ้อนและ / หรือหลายตัวแปร

จากhttps://angular.io/guide/router#optional-route-parameters

คุณเพียงแค่ต้องนำพารามิเตอร์ออกจากเส้นทางเส้นทาง

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

Angular 4 - โซลูชันเพื่อจัดการการเรียงลำดับของพารามิเตอร์ทางเลือก:

ทำเช่นนี้:

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

โปรดทราบว่าproductsและproducts/:idเส้นทางมีชื่อเหมือนกันทุกประการ Angular 4 จะติดตามproductsเส้นทางที่ไม่มีพารามิเตอร์อย่างถูกต้องและหากพารามิเตอร์นั้นจะติดตามproducts/:idเส้นทางที่มีพารามิเตอร์ไม่มีและถ้าพารามิเตอร์มันจะเป็นไปตาม

อย่างไรก็ตามเส้นทางสำหรับเส้นทางที่ไม่ใช่พารามิเตอร์productsจะต้องไม่เครื่องหมายทับท้ายมิฉะนั้นเชิงมุมจะถือว่าเป็นเส้นทางพารามิเตอร์อย่างไม่ถูกต้อง ดังนั้นในกรณีของฉันฉันมีเครื่องหมายทับสำหรับผลิตภัณฑ์และมันไม่ทำงาน

อย่าทำอย่างนี้:

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

คำตอบของ 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แม่แบบของ

คำตอบที่แนะนำที่นี่รวมถึงคำตอบที่ยอมรับจากrerezzซึ่งแนะนำให้เพิ่มหลายรายการเส้นทางทำงานได้ดี

อย่างไรก็ตามส่วนประกอบจะถูกสร้างขึ้นใหม่เมื่อเปลี่ยนระหว่างรายการเส้นทางเช่นระหว่างรายการเส้นทางที่มีพารามิเตอร์และรายการที่ไม่มีพารามิเตอร์

หากคุณต้องการหลีกเลี่ยงปัญหานี้คุณสามารถสร้างตัวจับคู่เส้นทางของคุณเองซึ่งจะจับคู่ทั้งสองเส้นทาง:

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

ด้วย angular4 เราเพียงแค่ต้องจัดเส้นทางด้วยกันในลำดับชั้น

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

มันใช้งานได้สำหรับฉัน วิธีนี้เราเตอร์จะรู้ว่าเส้นทางต่อไปคืออะไรขึ้นอยู่กับพารามิเตอร์รหัสตัวเลือก

พบกับปัญหานี้อีกครั้งและในการค้นหาวิธีแก้ไขปัญหาก็มาที่นี่ ปัญหาของฉันคือฉันกำลังทำกับเด็ก ๆ และการโหลดองค์ประกอบที่ขี้เกียจเช่นกันเพื่อเพิ่มประสิทธิภาพของสิ่งต่าง ๆ เล็กน้อย ในระยะสั้นถ้าคุณขี้เกียจโหลดโมดูลหลัก สิ่งสำคัญคือฉันใช้ '/: 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
      },
    ]
  }
];
...

ฉันไม่สามารถแสดงความคิดเห็น แต่อ้างอิงถึง: พารามิเตอร์เส้นทางทางเลือก 2 Angular

การอัปเดตสำหรับ Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

ดูhttps://angular.io/api/router/ActivatedRouteสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดเส้นทาง Angular6

เผชิญกับปัญหาที่คล้ายกันกับการโหลดที่ขี้เกียจฉันได้ทำสิ่งนี้แล้ว:

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 และสิ่งต่าง ๆ เช่นนั้น)