23

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

4

6 回答 6

8

Angular 2 中的主要组件和路由类。

router-link – router-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

于 2015-11-24T05:01:11.133 回答
7

一个有用的Angular 2 路由器示例。具体代码可以在这里找到。

于 2015-05-17T06:15:26.080 回答
7

Angular2 中的基本路由（更新到 Beta 版）

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

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

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

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

  • 路由器链接
  • 路由器插座
  • 和@RouteConfig

路由器链接 -

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

引用自官方

第一个路由名称应以 /、./ 或 ../ 开头。如果路由以 / 开头，路由器将从应用程序的根目录查找路由。如果路由以 ./ 开头，路由器将改为在当前组件的子组件中查找路由。如果路由以 ../ 开头，路由器将查看当前组件的父级

我们这样定义 routerLink -

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

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

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

路由器插座

路由器出口是一个占位符，其中路由数据将显示在显示屏上。还有另一种类型的路由器出口，称为aux route. 可以这样使用——

 <router-outlet></router-outlet>

@RouteConfig

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

  • path - 用于定义 whihc 在浏览器地址栏中显示为 url。

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

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

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

例子是 -

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

有关更多信息，另请参阅 -

对于子路由，另请参见 -

更新到 ANGULAR2 RC

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

  1. angular2/router已更改为@angular/router （您也可以使用 import of 路由的旧功能，@angular/router-deprecated但现在我们必须使用@angular/router）。

  2. @RouteConfig已更改为@Routes。

例如 ：-

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

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

于 2016-04-24T12:36:13.633 回答
5

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

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

于 2015-05-31T20:23:23.973 回答
3

也许来晚了，但试试这个:)

于 2015-05-30T08:56:05.047 回答
2

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

于 2016-05-24T20:59:00.957 回答