doo*_*man 23 typescript angular
我试图找到一个关于如何在Angular 2中使用路由器的具体示例.此外,5分钟快速入门中的当前angular2.d.ts类型文件 不支持@Routes注释.
Angular 2中的主要组件和路由类.
router-link - router-link指令用于声明链接到视图.它也可以包含可选参数.
示例:
<a [router-link]="['/AboutUs']">About Us</a>
router-outlet - 它作为占位符,用于渲染然后组件的视图.意味着模板和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中设置路由,你必须在主文件index.html中导入路由器文件,即
<script src="node_modules/angular2/bundles/router.dev.js"></script>
比我们必须在index.html中添加标签<base href="/">后<head>告诉路由器如何组成导航URL.通过这样做,我们只需设置角度路由的基本配置.
现在是时候配置路由了,根据需要设置我们的路由器,基本上我们需要三个基本的东西 -
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名称时应该用作名称.
component - 表示在此路由处于活动状态时加载的组件.
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}
])
休息生病很快就会根据更新日志中的更新更新我的答案.
到目前为止我见过的最好的是 https://github.com/angular-class/angular2-webpack-starter(它也与webpack一起使用 - 值得努力恕我直言)此外,它也支持TypeScript.
另外,基于最后一个链接是我的启动器,可以在这里找到 - https://github.com/EladRK/angular-starter
| 归档时间： |
|
| 查看次数： |
46735 次 |
| 最近记录： |