在Angular2 Dart中设置路由器和RouterLink的正确方法是啥

Posted 2023-02-19

【中文标题】在Angular2 Dart中设置路由器和RouterLink的正确方法是啥

【英文标题】：What's the proper way to set a Router & RouterLink in Angular2 Dart在Angular2 Dart中设置路由器和RouterLink的正确方法是什么

【发布时间】：2015-07-29 07:47:56

【问题描述】：

问题：在Angular2 Dart 中设置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);
    

这会导致错误并终止导航请求。

需要字符串 堆栈跟踪： 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)

【问题讨论】：

在 github 上可用 @github.com/rightisleft/angular2-dart-router-demo.git

【参考方案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';

【参考方案2】：

app/partials/phone-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>

【讨论】：

这是对错误语言的引用 - OP 询问的是 Dart 而不是 javascript - Jack Murphy 刚刚编辑

【参考方案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

【讨论】：

问题是关于 Dart 并且导入不起作用，而且 RC 还不能用于 Dart。只是提到它;-)

【参考方案4】：

注意：从 AngularJS 版本 1.2 开始，ngRoute 在它自己的模块中，必须通过加载额外的 angular-route.js 文件来加载，我们通过上面的 Bower 下载该文件。 app/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>

【讨论】：

这是对错误语言的引用 - OP 询问的是 Dart 而不是 Javascript

这也是对 Angular 版本 1 的引用 - 不是 Angular 2 - 请在回复之前仔细阅读问题