Angular 2 个路由器示例 + @Routes 输入支持

Angular 2 router examples + @Routes typing support

我正试图在 Angular 2 中找到有关如何使用路由器的具体示例。此外，当前的 angular2.d.ts 输入文件来自 5 min quickstart does not support @Routes 注释。

很有帮助Angular 2 Router example. The concrete code can be found here。

可能要晚了，但请尝试 this 一个 :)

到目前为止我看到的最好的是 https://github.com/angular-class/angular2-webpack-starter（它也与 webpack 一起使用 - 恕我直言，值得付出努力） 此外，它还支持 TypeScript。

另外，基于最后的link是我的首发，可以在这里找到-https://github.com/EladRK/angular-starter

Angular 2.

中路由的主要组成部分和 Class

router-link – router-link 指令用于将 link 声明到视图中。它也可以包含可选参数。

示例：

<a [router-link]="['/AboutUs']">About Us</a>

router-outlet – 它作为视图的占位符来渲染组件。意味着 template 和 templateUrl 将呈现在您将使用 router-outlet 指令的位置。

示例：

<router-outlet></router-outlet>

@RouteConfig – 我们将 URL 映射到本节中使用的组件。

示例：

@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/aboutus', component: AboutUsComponent, as: 'AboutUs'  }
    {path: '/contactus', component: ContactUsComponent, as: 'ContactUs'  }
])

RouteParams – 由路由器渲染的组件的参数。

阅读这篇文章了解更多http://www.codeandyou.com/2015/11/understand-routing-in-angular-2.html

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

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

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

我们必须在 index.html 中的 <head> 标记之后添加 <base href="/"> 来告诉路由器如何组成导航 URL。 通过这样做，我们刚刚在 angular.

中设置了路由的基本配置

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

  • routerLink
  • 路由器插座
  • 和@RouteConfig

routerLink -

RouterLink 期望该值为路由名称数组，后跟该路由级别的参数。

Quoted from the official's

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent

我们这样定义 routerLink - 

<a [routerLink]="['./HomeCmp']">Hello Routing</a>

在这里我们可以提供参数和路由，这些是可选的，我们也可以从这里提供子路由。像这样的参数 - 

<a [routerLink]="['./HomeCmp', {key : value}]">Hello Routing</a>

路由器插座

路由器插座是一个占位符，路由数据将显示在 display.there 上也存在另一种类型的路由器插座，称为 aux route。可以这样使用 - 

 <router-outlet></router-outlet>

@RouteConfig

routConfig 上存在各种 属性，例如路径、名称、组件等。 当浏览器的 URL 发生变化时，路由器会查找相应的 RouteDefinition，从中可以确定要显示的组件。

  • path - 用于定义浏览器地址栏中显示为url的路径。

  • name - 在定义 routerLink 名称时应用作名称。

  • component - 表示当此路由处于活动状态时要加载的组件。

  • useDefaultAs - 如果我们想将其设置为默认路由，请设置为真。

例如 - 

@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useDefaultAs : true}
])

有关详细信息，另请参阅 -

对于子路由，另请参阅 -

更新到 Angular2 RC

在 RC 之后 angular2 中的路由发生了很多变化，我在这里提到的一些要点可能会对某人有所帮助：-

  1. angular2/router 已更改为 @angular/router （您也可以使用导入 @angular/router-deprecated 的旧路由功能，但截至目前我们必须使用 @angular/router）。

  2. @RouteConfig 已更改为 @Routes。

例如：- 

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

休息吧，根据更新日志更新我的答案。

在 Angular 2 RC.1 中路由

这是您可以尝试的另一个资源 (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