在 Angular 中的命名插座中导航不起作用。为什么?
Navigation in a named outlet in Angular does not work. Why?
在 Angular 中的命名出口中的导航不起作用。为什么?
这是错误:
NavigationStart(id: 3, url: '/(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)')
...
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
at ApplyRedirects.noMatchError (router.js:4396)
这是我的路线设置:
const routes: Routes = [
{ path: "empty", component: EmptyComponent },
{ path: "", component: HomeComponent },
{ path: "empty", component: EmptyComponent, outlet: Outlets.sidebar },
{ path: "login", component: LoginComponent, outlet: Outlets.sidebar },
{
path: "account-creation",
component: CreateAccountComponent,
outlet: Outlets.sidebar
},
{ path: "menu", component: MainMenuComponent, outlet: Outlets.sidebar },
{ path: "empty", component: EmptyComponent, outlet: Outlets.headerInfo },
{
path: "header-info",
component: HeaderInfoComponent,
outlet: Outlets.headerInfo
}
];
这是Outlets
:
export const Outlets = {
sidebar: "sidebar-outlet",
headerInfo: "header-info-outlet"
};
这里是routerLink
,点击一次会产生错误:
[routerLink]= "[{ outlets: { 'sidebar-outlet': ['account-creation']}}]"
这是路由器的倒数第二个状态:
/(sidebar-outlet:login//header-info-outlet:empty)
如果错误得到修复,路由器的预期最终状态如下:
/(sidebar-outlet:account-creation//header-info-outlet:empty)
我很困惑,找了两天的答案也没找到。通过这样的 routerLink
(特别是 'sidebar-outlet': ['account-creation']
),我希望点击后的路线是 /(sidebar-outlet:account-creation//header-info-outlet:empty)
,但它试图变成 /(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)
,正如我们在错误中看到的那样。
我该如何解决?
更新
这是我的 app.component.html
(只有下面显示的部分包含 router-outlet
,在我的项目模板中没有其他地方我会使用 router-outlet
):
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block"
rel="stylesheet"
/>
<div class="mat-app-background">
<mat-toolbar class="main-toolbar" color="primary">>
<router-outlet name="header-info-outlet"></router-outlet>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav
position="end"
mode="over"
class="sidebar-container">
<router-outlet name="sidebar-outlet"></router-outlet>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
您的模板是否包含未命名的路由器插座?我最近遇到了同样的麻烦,对我来说它起作用了,因为我只是在我的应用程序组件中添加了一个默认的路由器插座
这对你有用。创建一个名为 sideNavContainer 的新组件。然后创建另一个名为 sideNavComponent 和另一个 SidNav2Component,分解 html 因此容器包含两个 sideNavs。,创建一个到容器的路由,然后添加 2 child 路由指向其他路由。
将容器添加到工具箱。任何到 children 的导航都应该刷新 children 而不会影响其他事情。
在 Angular 中的命名出口中的导航不起作用。为什么?
这是错误:
NavigationStart(id: 3, url: '/(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)')
...
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
at ApplyRedirects.noMatchError (router.js:4396)
这是我的路线设置:
const routes: Routes = [
{ path: "empty", component: EmptyComponent },
{ path: "", component: HomeComponent },
{ path: "empty", component: EmptyComponent, outlet: Outlets.sidebar },
{ path: "login", component: LoginComponent, outlet: Outlets.sidebar },
{
path: "account-creation",
component: CreateAccountComponent,
outlet: Outlets.sidebar
},
{ path: "menu", component: MainMenuComponent, outlet: Outlets.sidebar },
{ path: "empty", component: EmptyComponent, outlet: Outlets.headerInfo },
{
path: "header-info",
component: HeaderInfoComponent,
outlet: Outlets.headerInfo
}
];
这是Outlets
:
export const Outlets = {
sidebar: "sidebar-outlet",
headerInfo: "header-info-outlet"
};
这里是routerLink
,点击一次会产生错误:
[routerLink]= "[{ outlets: { 'sidebar-outlet': ['account-creation']}}]"
这是路由器的倒数第二个状态:
/(sidebar-outlet:login//header-info-outlet:empty)
如果错误得到修复,路由器的预期最终状态如下:
/(sidebar-outlet:account-creation//header-info-outlet:empty)
我很困惑,找了两天的答案也没找到。通过这样的 routerLink
(特别是 'sidebar-outlet': ['account-creation']
),我希望点击后的路线是 /(sidebar-outlet:account-creation//header-info-outlet:empty)
,但它试图变成 /(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)
,正如我们在错误中看到的那样。
我该如何解决?
更新
这是我的 app.component.html
(只有下面显示的部分包含 router-outlet
,在我的项目模板中没有其他地方我会使用 router-outlet
):
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block"
rel="stylesheet"
/>
<div class="mat-app-background">
<mat-toolbar class="main-toolbar" color="primary">>
<router-outlet name="header-info-outlet"></router-outlet>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav
position="end"
mode="over"
class="sidebar-container">
<router-outlet name="sidebar-outlet"></router-outlet>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
您的模板是否包含未命名的路由器插座?我最近遇到了同样的麻烦,对我来说它起作用了,因为我只是在我的应用程序组件中添加了一个默认的路由器插座
这对你有用。创建一个名为 sideNavContainer 的新组件。然后创建另一个名为 sideNavComponent 和另一个 SidNav2Component,分解 html 因此容器包含两个 sideNavs。,创建一个到容器的路由,然后添加 2 child 路由指向其他路由。
将容器添加到工具箱。任何到 children 的导航都应该刷新 children 而不会影响其他事情。