相同的路徑和相同數量的參數，但在Angular 5應用程序中用於路由的組件不同

Question

app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'details/:id/:name/:product', component: DetailComponent},
    ...
]

根據客戶的要求，我們需要更改兩個組件的房屋路徑。 因此，我們更新了app.routing.module.ts。

更新了app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'homes/:id/:name/:product', component: DetailComponent},
    ...
]

但是，由於我們在每個組件中使用的參數數量相同 ，因此會發生沖突，並且無法正確呈現，在所有情況下，它都路由到我們在“路由”列表中首先給出的HomesComponent。

你們有沒有解決此問題的建議，而又不影響參數的路徑和數量？

Answer 1

當paths和parameters UrlMatcher時，請使用自定義UrlMatcher

形式正式文件：當path和pathMatch的組合表達能力不足時，可以提供自定義URL匹配器

在您的情況下，我將創建一個自定義匹配器。

解決方案1：

export const routes = [{ 
  matcher: homeCustomerMatcher,
  component: HomeComponent 
}, {
  matcher: detailsCustomerMatcher,
  component: DetailsComponent
}];

方案A：如果參數的數據類型不同。 假設/:rate參數是數字數據類型， /:name是字符串

export function homeCustomerMatcher(url: UrlSegment[]){
 return url.length === 3 && isInteger(url[1].path * 1) ? ({consumed: url}) : null;
}

方案B：如果/:name值是預定義的。 假設:/rate and :/name是相同的日期類型

在這種情況下，我們可以創建可能的名稱值的集合/數組，然后再次將這些值與路徑值進行比較。

const possibleNameValues = ["A","B","C"];
export function homeCustomerMatcher(url: UrlSegment[]){
 return url.length === 3 &&  possibleNameValues.includes(url[1].path)  
 ? ({consumed: url}) : null;
}

解決方案2：

將regex與UrlMatcher配合使用以匹配param數據類型

  {
    path: 'homes/:id',
    children: [
        {
            path: ':rate',
            matcher: NumericUrlMatcher,
            component: Ratecomponent
        },
        {
            path: ':name',
            component: NameComponent
        }
   }

現在，您的客戶匹配器功能應更新為

 export function NumericUrlMatcher(url: UrlSegment[]) {
    const regex = new RegExp(...);
    const match = url[0].path.match(regex);
    return match !== null && match[0].length === url[0].path.length;
  }

Answer 2

您可以使用the path創建包裝器組件，並以編程方式route到其他組件。

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: WrapperComponent},
    ...
]

包裝模板：

<detail-component *ngIf="yourCondition"><detail-component>
<home-component *ngIf="!yourCondition"></home-component>

你會如何去尋找第一個方法yourCondition我不知道。

但是，我絕對不建議這樣做。

Answer 3

當針對上述情況時，取決於查詢參數而不是路由參數，我發現@ritaj的答案很有用，只需幾行代碼即可檢查以下路由。 由於UrlMatcher似乎無法訪問已激活的路由，因此也無法訪問已激活的路由。

路線

{ path: 'apply', component: ApplicationRouterComponent },

路由處理程序組件

export class ApplicationRouterComponent implements OnInit {

  type: string;
  state: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(q => {
      this.type = q['type'];
      this.state = q['state'];
    });
  }

  showApplicationForm(): boolean {
    return this.type !== 'new' || this.state !== 'inprogress';
  }

  showInProgressForm(): boolean {
    return this.type === 'new' && this.state === 'inprogress';
  }

}

路由處理程序html

<app-application *ngIf="showApplicationForm()"></app-application>
<app-resume *ngIf="showInProgressForm()"></app-resume>