無法導航到Angular中的特定頁面

Question

我無法在我的有角度的應用程序中瀏覽特定頁面，在這種情況下，我想從我的路由模塊中的app.component.ts導航至(tabs/market-palce/fornecedores) 。

 Error: Cannot match any routes. URL Segment: 'tabs/market-palce/fornecedores'

如果從其他頁面而不是app.component.hmtl並打印網址，則顯示此內容

/tabs/default/(marketTab:market-place/fornecedores//cartoesTab:cartoes/default//profileTab:profile/default//experienciaTab:experiencia/default)

我怎么能從app.component.ts轉到fornedores頁面？

我該怎么做？ 我沒有任何想法。

我正在app.comoponent.ts中嘗試

 this.routerExtensions.navigate(['tabs/market-place/fornecedores', { relativeTo: this.activeRoute });

應用路由

    const routes: Routes = [

        {   path: "",
            redirectTo: "/login",
            pathMatch: "full"
        },

        {   path: "login",
            component: LoginComponent
        },

        {
            path: "tabs",
            loadChildren: "~/app/tabs/tabs.module#TabsModule"
        }
]

標簽路由

const routes: Routes = [

    {
        path: "default", component: TabsComponent, children: [


            {
                path: "market-place",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/market-place/market-place.module#MarketPlaceModule",
                outlet: "marketTab"
            },
            {
                path: "cartoes",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/cartoes/cartoes.module#CartoesModule",
                outlet: "cartoesTab"
            },
            {
                path: "profile",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/profile/profile.module#ProfileModule",
                outlet: "profileTab"
            },
            {
                path: "experiencia",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/experiencia/experiencia.module#ExperienciaModule",
                outlet: "experienciaTab"
            }
        ]
     }
];

市場路由

const routes: Routes = [
    {path: "", redirectTo: "default" },
    {path: "default", component: MarketPlaceComponent},
    {path: "fornecedores", component: FornecedoresComponent }

];

Answer 1

如您在文檔中所見

{   path: "",
    redirectTo: "/login",
    pathMatch: "full"
},

到數組的末尾。

從技術上講，當URL的其余未匹配段匹配''時，pathMatch ='full'導致路由命中。 在此示例中，重定向位於頂層路由中，因此其余URL和整個URL是同一件事。

另一個可能的pathMatch值是'prefix'，當剩余的URL以重定向路由的前綴路徑開頭時，它告訴路由器匹配重定向路由。

不要在這里做。 如果pathMatch值為'prefix'，則每個URL都將匹配“”。

嘗試將其設置為“前綴”，然后單擊“轉到同伴”按鈕。 請記住，這是一個錯誤的URL，您應該看到“找不到頁面”頁面。 相反，您仍在“英雄”頁面上。 在瀏覽器地址欄中輸入錯誤的URL。 您立即被重新路由到/ heroes。 符合此路由定義的每個URL（無論好壞）都是一個匹配項。

僅當整個網址為“”時，默認路由才應重定向到HeroListComponent。 請記住，將重定向恢復為pathMatch ='full'。

在Victor Savkin的重定向文章中了解更多信息。

Answer 2

組態

首先，我想您將被重定向到login路徑或頁面。 這很正常。

當角匹配路徑，則""至上，被重定向的"/login" ，之后是什么"login" ，然后將"tabs" 。

您的問題是路由""與所有路由（甚至是"tabs"都匹配，因此您總是被重定向到/login路徑。

然后，您可能需要將空路徑放在最后，例如：

const routes: Routes = [
  {   
      path: "login",
      component: LoginComponent
  },
  {
      path: "tabs",
      loadChildren: "~/app/tabs/tabs.module#TabsModule"
  }
  {   
      path: "",
      redirectTo: "/login",
      pathMatch: "full"
  },
]

（我個人通常使用"**"代替""因為我想知道這是我的路的盡頭，並且會在未知路徑上重定向）

您可以在官方文檔的頁面上閱讀有關所有這些技巧的更多信息。

導航

現在，如果要導航，則應使用Router -service並提供路徑。

您可以使用絕對路徑更快，例如使用

/tabs/market-palce/fornecedores

代替

tabs/market-palce/fornecedores 。

（請注意/開頭）

constructor(
   ...
   private router: Router,
   ...
) {...}

navigateToTabs() {
   const path = '/tabs/market-palce/fornecedores'
   this.router.navigate([path]); // <-- Here the is your path
}

您可能還想在此處 （在官方文檔的頁面上）了解更多使用angular導航的方法