Nativescript Angular错误：无法使用TabStrip匹配任何路由。

huangapple
go评论101阅读模式
英文:

Nativescript Angular Error: Cannot match any routes using TabStrip

问题

你的问题是如何从详细页面（itemDetails）返回到主页（home），但遇到了路由问题。你可以尝试以下方式解决：

  1. onItemTapped(newIndexObj) {
  2.   const isInSameTab = newIndexObj.index === this.selectedTab ? true : false;
  3.   if (isInSameTab) {
  4.     if (this.selectedTab === 0) {
  5.       // 使用相对路由返回主页
  6.       this.routerExtensions.navigate(['../home'], {
  7.         clearHistory: true
  8.       });
  9.     }
  10.   }
  11. }

这应该能够从详细页面返回到主页。确保你在tabsWrapper模块中正确配置了路由，以使相对路由有效。

英文:

in my Nativescript+Angular app I'm using a BottomNavigation with TabStrip.

app.routing.ts:

  1. const routes: Routes = [
  2.  { path: "", redirectTo: "/login", pathMatch: "full" },
  3.  { path: "login", component: LoginComponent },
  4.  { path: "tabsWrapper", component: TabsWrapperComponent, loadChildren: "./tabsWrapper/tabsWrapper.module#TabsWrapperModule", canActivate: [AuthGuard] }
  5. ];

After the login, I navigate to tabsWrapper:

  1. this.routerExtensions.navigate(["tabsWrapper"], { clearHistory: true }).catch(err => console.log(err));

This is the routing of taspWrapper, tabsWrapper-routing.module.ts:

  1. const routes: Routes = [
  2. {
  3.     path: "",
  4.     redirectTo: "home",
  5.     pathMatch: "full"
  6. },
  7. { path: "home", loadChildren: "../home/home.module#HomeModule", outlet: "homeTab" },
  8. { path: "subscriptions", loadChildren: "../subscriptions/subscriptions.module#SubscriptionsModule", outlet: "subscriptionsTab" }
  9. ];

There are two tabs, the "Home" tab and the "Subscriptions" tab; there are both lazy-loaded modules.

tabsWrapper.component.html:

  1. <BottomNavigation selectedIndex="0" (selectedIndexChanged)="onSelectedIndexChanged($event)">
  2.     <TabStrip (itemTap)="onItemTapped($event)">
  3.         <TabStripItem title="home">
  4.             <Label class="tab-title" text="Home"></Label>
  5.         </apabStripItem>
  6.         <TabStripItem title="subscriptions">
  7.             <Label class="tab-title" text="Subscriptions"></Label>
  8.         </TabStripItem>
  9.     </TabStrip>
  11.     <TabContentItem>
  12.         <GridLayout>
  13.             <page-router-outlet name="homeTab"></page-router-outlet>
  14.         </GridLayout>
  15.     </TabContentItem>
  16.     <TabContentItem>
  17.         <GridLayout>
  18.             <page-router-outlet name="subscriptionsTab"></page-router-outlet>
  19.         </GridLayout>
  20.     </TabContentItem>
  21. </BottomNavigation>

This is the routing of the home module
home-routing.module.ts:

  1. const routes: Routes = [
  2. { path: "", redirectTo: "home" },
  3. { path: "itemDetails/:itemId", component: ItemDetailsComponent },
  4. { path: "home", component: HomeComponent }
  5. ];

In the home component there are some items retrieved by services. When I tap on them, it redirects correctly to the item details page. For UI choise I can't put a back button on header, so what I'm trying to do is that if I am in the item details page, if I tap on Home Tab it has to go back home (and I can't use just a navigation.back() because then I'll have to add some routes which from the detail page brings you to a second detail page).

As you can notice I added (itemTap)="onItemTapped($event)" on tabsWrapper component, and it has to handle the behaviour:

  1.   onItemTapped(newIndexObj) {
  2.    const isInSameTab = newIndexObj.index === this.selectedTab ? true : false;
  3.    if (isInSameTab) {
  4.   if (this.selectedTab === 0) {
  5.     this.routerExtensions.navigate(['../home'], {
  6.       clearHistory: true
  7.     });
  9.     /*
  10.     this.routerExtensions.navigate(['/tabsWrapper/{homeTab:home}/home'], {
  11.       clearHistory: true
  12.     }); 
  14.     this.routerExtensions.navigate(['/tabsWrapper/'], {
  15.       clearHistory: true
  16.     }); 
  17.     this.router.navigate(["../"], {  });
  18.     */
  20.     }
  22.   }
  23.  }

As you can see I tried a lot of ways but none of them works; if I use "home" it gives me the error "Error: Cannot match any routes. URL Segment: 'home'", same if I use "tabsWrapper".

So, I am in the detail page inside the "home" tab and by pressing on the "Home" tab I want to go back to the list of items from the detail page (the route "/home" of the home.module.ts module), and this is the structure of app:

  • login
  • tabsWrapper
    • home
      • home <-------- TO HERE
      • itemDetails/:itemId <-------- FROM HERE
      • subitemDetails/:itemId/:secondItemId (this I'll have to add later)
    • subscriptions
      • .....
      • ..... (there will be a similar behaviour)

If it can helps, I put a breakpoint in onItemTapped() function and I debug this.router.url: "/tabsWrapper/(homeTab:home/itemDetails/6f92b723-7938-4d26-9262-a3f92846b3c8//subscriptionsTab:subscriptions/subscriptions)"

答案1

得分: 3

我找到了解决方案：

this.router.navigate([{ outlets: { "homeTab": ["home"] } }], { relativeTo: this.route });

我必须显式指定了出口。

英文:

I found the solution:

  1. this.router.navigate([{ outlets: { &quot;homeTab&quot;: [&quot;home&quot;] } }], { relativeTo: this.route });

I had to explicit the outlet

答案2

得分: 1

根据情况，您可以在Angular路由器中使用relativeTo属性。

目前的activatedRoute是tabsWrapper/home/itemDetails:itemId。
从这个路由，Angular不知道home路由，这是引发错误的原因。

尝试使用，

在component.ts文件中：

  1. export class Dummy {
  2.     constructor(private router: Router, private route: ActivatedRoute) {}
  4.     goTo() {
  5.         this.router.navigate(['../home'], { relativeTo: this.route });
  6.     }
  7. }

希望这对您有帮助。

英文:

Based on the scenario, you can use the relativeTo property in angular router.

Currently the activatedRoute is tabsWrapper/home/itemDetails:itemId.
From this route, angular does not know about the home route which is the thrown error.

Try using,

In component.ts file:

  1. export class Dummy {
  2.     constructor(private router: Router, private route: ActivatedRoute) {}
  4.     goTo() {
  5.         this.router.navigate([&#39;../home], { relativeTo: this.route })
  6.     }
  7. }

Hope this works.

huangapple
  • 本文由 发表于 2020年1月3日 17:22:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/59575915.html
  • angular
  • bottomnavigationview
  • nativescript
  • nativescript-angular
  • tabstrip
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定