我试图找到一个关于如何在Angular 2中使用路由器的具体示例。此外,当前angular2.d.ts键入文件来自 5 min quickstart不支持@Routes注释。
答案 0 :(得分:7)
乐于助人Angular 2 Router example。具体代码可以找到here。
答案 1 :(得分:7)
首先在angular2中设置路由,你必须在主文件index.html中导入路由器文件,即
<script src="node_modules/angular2/bundles/router.dev.js"></script>
我们必须在index.html中的<base href="/">
标记之后添加<head>
,告诉路由器如何撰写导航网址。
通过这样做,我们只需设置角度路由的基本配置。
现在是配置路由的时候了,根据需要设置我们的路由器,基本上我们需要三个基本的东西 -
RouterLink期望该值为路由名称数组,后跟该路由级别的参数。
引自官方的
第一个路径名称应以/,。/或../为前缀。如果路由以/开头,则路由器将从应用程序的根目录查找路由。 如果路由以./开头,则路由器将查找当前组件的子路由。如果路线以../开头, 路由器将查看当前组件的父级
我们像这样定义routerLink -
<a [routerLink]="['./HomeCmp']">Hello Routing</a>
这里我们可以提供参数以及可选的路由,也可以从这里提供子路由。像这样的参数 -
<a [routerLink]="['./HomeCmp', {key : value}]">Hello Routing</a>
路由器插座是占位符,其中路由数据将显示在显示器上。还存在另一种类型的路由器插座,称为aux route
。可以像这样使用 -
<router-outlet></router-outlet>
routConfig上存在各种属性,如路径,名称,组件等。 当浏览器的URL发生变化时,路由器会查找相应的RouteDefinition,从中可以确定要显示的组件。
path - 用于定义whihc在浏览器的地址栏中显示为url。
name - 在定义routerLink名称时应该用作名称。
组件 - 表示在此路由处于活动状态时加载的组件。
useDefaultAs - 如果我们想将此设置为默认路由,则设置为true。
示例是 -
@RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useDefaultAs : true}
])
有关详细信息,请参阅 -
另见 -
在RC中的路由中有很多变化在RC之后,其中一些点我会提到这里可能会帮助某人: -
angular2/router
已更改@angular/router
(您也可以使用导入@angular/router-deprecated
来使用路由的旧功能,但到目前为止我们必须使用@angular/router
)。
@RouteConfig
已更改为@Routes
。
例如: -
@Routes([
{path: '/crisis-center', component: CrisisListComponent},
{path: '/heroes', component: HeroListComponent}
])
请尽快更新我的答案,根据更新日志中的更新。
答案 2 :(得分:5)
迄今为止我见过的最好的是 https://github.com/angular-class/angular2-webpack-starter(这也是webpack的一部分 - 值得努力恕我直言) 此外,它也支持TypeScript。
此外,基于最后一个链接是我的启动器,可在此处找到 - https://github.com/EladRK/angular-starter
答案 3 :(得分:3)
也许迟到了,但试试this一个:)
答案 4 :(得分:2)
这是您可以尝试的另一种资源(Angular RC.1): https://playcode.org/routing-in-angular-2-rc-1/
以下是代码: https://github.com/jlsuarezs/RoutingExample
我建议您使用Angular-CLI创建新路由: https://github.com/angular/angular-cli
实施例: https://github.com/angular/angular-cli#generating-a-route