如何在 Angular 中实现多级路由? [英] How to implement multi-level routing in Angular?
问题描述
我正在做我的一个小项目,以便更多地了解 Angular,但我真的不知道如何实现多级路由.
我已阅读关于新版本的
让我们考虑我的应用程序的组件如下:
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';import { MyAppComponent } from './my-app/my-app.component';从'./my-app/my-app.routes'导入{APP_ROUTER_PROVIDERS};引导程序(MyAppComponent,[ APP_ROUTER_PROVIDERS ]).catch(err => console.error(err));
my-app.component.ts
import { Component } from '@angular/core';从'@angular/router' 导入 { ROUTER_DIRECIVES };@成分({选择器:'我的应用',模板:'<路由器插座></路由器插座>',指令:[ROUTER_DIRECIVES],})导出类 MyAppComponent { }
my-app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';从 './home/home.component' 导入 { HomeComponent };从 './login/login.component' 导入 { LoginComponent };import { SignUpComponent } from './sign-up/sign-up.component';从 './admin/admin.routes' 导入 { AdminRoutes};导出常量路由:RouterConfig = [{ 路径:'',组件:HomeComponent },{ 路径:'登录',组件:LoginComponent },{ 路径:'注册',组件:SignUpComponent },...管理路由,];出口const APP_ROUTER_PROVIDERS = [提供路由器(路线)];
admin.component.ts
import { Component } from '@angular/core';从'@angular/router' 导入 { ROUTER_DIRECIVES };@成分({选择器:'管理员',模板:'你好,我是管理员 <br><路由器插座></路由器插座>',指令:[ROUTER_DIRECIVES]})导出类 AdminComponent { }
admin.routes.ts
import { RouterConfig } from '@angular/router';从 './admin.component' 导入 { AdminComponent };import { MainPageComponent } from './main-page/main-page.component';从 './settings/settings.component' 导入 { SettingsComponent };导出 const AdminRoutes:RouterConfig = [{路径:'管理员',组件:管理组件,孩子们: [{ path: 'main-page', 组件: MainPageComponent },{路径:'设置',组件:设置组件},]}];
main-page.component.ts
import { Component } from '@angular/core';@成分({选择器:'主页',模板:你好,我是主页!!!"})导出类 MainPageComponent { }
settings.component.ts
import { Component } from '@angular/core';@成分({选择器:'设置',模板:'你好,我是 SETTINGS!!!'})导出类 SettingsComponent { }
当我尝试使用这样的配置时,没有任何效果,并且浏览器的控制台充满了错误.
只有当我在 admin.routes.ts 中添加 children[...] 时才会发生这种情况,并且我认为问题出在那里.
- 你能给我一些关于如何正确实施的提示吗?
- 我错过了什么吗?
- 有更好的方法吗?
在此先感谢您的帮助,我希望我在帖子中所写的内容对理解我的问题有所帮助!
Angular 路由器将带有子级的路由视为非终端路由,路由只发生在终端路由上.Angular 路由器期望路由具有 path: ''
的默认条目.
要解决此问题,您应该添加从父路由到子路由之一的重定向.
export const AdminRoutes: RouterConfig = [{路径:'管理员',组件:管理组件,孩子们: [{ path: '', redirectTo: 'main-page', 终端: 'true' },{ 路径:'主页面',组件:MainPageComponent,{路径:'设置',组件:设置组件},]}];
如果使用 rc4 和路由器 3.0.0-beta2,他们已将 terminal
重命名为 pathMatch
.所以更新重定向路由如下:
{ path: '', redirectTo: 'main-page', pathMatch: 'full'},
I'm working on a little project of mine in order to learn something more about Angular, but I really cannot figure out how to implement a multi-leveled routing.
I've read the documentation about the new release of the Router Component and also some other topics on StackOverlfow (first, second, third), but I cannot find a solution to my problem.
Let's consider the following app structure, without considering the Test and Test2 blocks.
And let's consider the components of my app as following:
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { MyAppComponent } from './my-app/my-app.component';
import { APP_ROUTER_PROVIDERS } from './my-app/my-app.routes';
bootstrap(MyAppComponent, [ APP_ROUTER_PROVIDERS ])
.catch(err => console.error(err));
my-app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES],
})
export class MyAppComponent { }
my-app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { AdminRoutes} from './admin/admin.routes';
export const routes: RouterConfig = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'sign-up', component: SignUpComponent },
...AdminRoutes,
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
admin.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'admin',
template: 'Hello I am ADMIN <br> <router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
})
export class AdminComponent { }
admin.routes.ts
import { RouterConfig } from '@angular/router';
import { AdminComponent } from './admin.component';
import { MainPageComponent } from './main-page/main-page.component';
import { SettingsComponent } from './settings/settings.component';
export const AdminRoutes: RouterConfig = [
{
path: 'admin',
component: AdminComponent,
children: [
{ path: 'main-page', component: MainPageComponent },
{ path: 'settings', component: SettingsComponent },
]
}
];
main-page.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'main-page',
template: 'Hello I am MAIN PAGE!!!'
})
export class MainPageComponent { }
settings.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'settings',
template: 'Hello I am SETTINGS!!!'
})
export class SettingsComponent { }
When I try to use such a configuration nothing works anymore and the browser's console is full of errors.
This happens only when I add the children[...] in the admin.routes.ts, and I think the problems come in there.
- Could you give me any hint on how I can implemented properly, please?
- Am I missing anything?
- Is there a better way?
Thank you in advance for your help and I hope what I've written in the post it's helpful to understand my issue!
Angular router considers a route with children as a non-terminal route and routing happens to terminal routes only.
Angular router expects route to have a default entry for path: ''
.
To resolve this issue you should add a redirect from the parent route to one of the child routes.
export const AdminRoutes: RouterConfig = [
{
path: 'admin',
component: AdminComponent,
children: [
{ path: '', redirectTo: 'main-page', terminal: 'true' },
{ path: 'main-page', component: MainPageComponent,
{ path: 'settings', component: SettingsComponent },
]
}];
Edit: if using rc4 and router 3.0.0-beta2 they have renamed terminal
to pathMatch
. So update the redirect route as below:
{ path: '', redirectTo: 'main-page', pathMatch: 'full'},
这篇关于如何在 Angular 中实现多级路由?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!