Angular2中的基本路由（已更新至Beta）

Question

我试图找到一个关于如何在Angular 2中使用路由器的具体示例。此外，当前angular2.d.ts键入文件来自 5 min quickstart不支持@Routes注释。

Answer 1

乐于助人Angular 2 Router example。具体代码可以找到here。

Answer 2

首先在angular2中设置路由，你必须在主文件index.html中导入路由器文件，即

<script src="node_modules/angular2/bundles/router.dev.js"></script>

我们必须在index.html中的<base href="/">标记之后添加<head>，告诉路由器如何撰写导航网址。通过这样做，我们只需设置角度路由的基本配置。

现在是配置路由的时候了，根据需要设置我们的路由器，基本上我们需要三个基本的东西 -

routerLink -

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，从中可以确定要显示的组件。

示例是 -

@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}
])

请尽快更新我的答案，根据更新日志中的更新。

Answer 3

迄今为止我见过的最好的是 https://github.com/angular-class/angular2-webpack-starter（这也是webpack的一部分 - 值得努力恕我直言）此外，它也支持TypeScript。

此外，基于最后一个链接是我的启动器，可在此处找到 - https://github.com/EladRK/angular-starter

Answer 4

也许迟到了，但试试this一个：）

Answer 5

这是您可以尝试的另一种资源（Angular RC.1）： https://playcode.org/routing-in-angular-2-rc-1/

我建议您使用Angular-CLI创建新路由： https://github.com/angular/angular-cli