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);
    }

这会导致错误并导致导航请求失败。

预期的字符串   堆栈跟踪：   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）

Answer 1

从Angular Dart 2.0.0（候选版本）开始，路由器链接的correct syntax为：

<a [router-link]="['./Home']">Go Home</a>

该值是传递给Router.navigate()的参数列表。

用于配置路由的

The correct syntax是：

@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';
}

Answer 2

应用/分音/电话list.html：

<div class="container-fluid"> <div class="row"> <div class="col-md-2">  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">  <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>

Answer 3

检查@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

Answer 4

注意：从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>

设置路由器和放大器的正确方法是什么？ Angular2 Dart中的RouterLink

main.dart

4 个答案: