在Angular2 Dart中设置路由器和路由器链接的正确方法是什么？
问题 ：在Angular2 Dart设置Router和Router RouterLink的正确方法是什么？
main.dart
import 'package:angular2/angular2.dart'; import 'package:angular2/router.dart'; import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; @Component( selector: 'home' ) @View( template: '<h1>I am Home</h1><a router-link="child">Go Child</a>', directives: const [RouterOutlet, RouterLink] ) class Home {} // // // @Component( selector: 'child' ) @View( template: '<h1>I am Child</h1><a router-link="home">Go Home</a>', directives: const [RouterOutlet, RouterLink] ) class Child {} // // // @Component( selector: 'index' ) @View( template: ''' <router-outlet></router-outlet> ''', directives: const [RouterOutlet, RouterLink] ) class Index { Router router; Index(Router this.router) { router.config({ 'path': '/child', 'component': Child, 'alias': 'child'}); router.config({ 'path': '/', 'component': Home, 'alias': 'home'}); } } main() { reflector.reflectionCapabilities = new ReflectionCapabilities(); bootstrap(Index, routerInjectables); }
这是我的方法：
在router_link.dart我看到newHref返回为null
onAllChangesDone() { if (isPresent(this._route) && isPresent(this._params)) { var newHref = this._router.generate(this._route, this._params); this._href = newHref; // Keeping the link on the element to support contextual menu `copy link` // and other in-browser affordances. print('newHref'); print(newHref); DOM.setAttribute(this._domEl, "href", newHref); }
这会导致错误并杀死导航请求。
预期stringSTACKTRACE：0 BlinkElement.setAttribute_Callback_2（dart：_blink：7565）
1 BlinkElement.setAttribute_Callback_2_（dart：_blink：7566）
2 Element.setAttribute（dart：html：13673）
3 BrowserDomAdapter.setAttribute（package：angular2 / src / dom / browser_adapter.dart：258：25）
4 RouterLink.onAllChangesDone（package：angular2 / src / router / router_link.dart：66：23）
从Angular Dart 2.0.0（候选版本）开始，路由器链接的正确语法是：
<a [router-link]="['./Home']">Go Home</a>
该值是传递给Router.navigate()的参数列表。
configuration路由的正确语法是：
@Component( selector: 'my-app', template: ..., directives: const [ROUTER_DIRECTIVES], providers: const [HeroService, ROUTER_PROVIDERS]) @RouteConfig(const [ const Route( path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true), const Route( path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent), const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent) ]) class AppComponent { String title = 'Tour of Heroes'; }
应用程序/分音/电话list.html：
<div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Sidebar content--> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> </div> <div class="col-md-10"> <!--Body content--> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"> <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a> <a href="#/phones/{{phone.id}}">{{phone.name}}</a> <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div>
参考这个链接，这是非常有用的（ https://github.com/rightisleft/angular2-dart-router-demo ）
看看@ ngrx / router这是Angular 2的一个简单的路由器实现https://github.com/ngrx/router
你可以看到声明路线有多简单
import { Routes } from '@ngrx/router'; const routes: Routes = [ { path: '/', component: HomePage }, { path: '/blog', component: BlogPage, children: [ { path: ':id', component: PostPage } ] } ]
这里是一个演示plunker http://plnkr.co/edit/7J6RrA?p=preview
注意：从AngularJS版本1.2开始，ngRoute在它自己的模块中，并且必须通过加载我们通过上面的Bower下载的额外的angular-route.js文件来加载。 应用程序/ index.html的：
<!doctype html> <html lang="en" ng-app="phonecatApp"> <head> ... <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body> <div ng-view></div> </body>
