加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

在Angular2 Dart中设置Router和RouterLink的正确方法是什么

发布时间:2020-12-17 09:05:23 所属栏目:安全 来源:网络整理
导读:问题:什么是正确的方式设置路由器 RouterLink在Angular2 Dart中。 main.dart import 'package:angular2/angular2.dart';import 'package:angular2/router.dart';import 'package:angular2/src/reflection/reflection.dart' show reflector;import 'package:
问题:什么是正确的方式设置路由器& RouterLink在Angular2 Dart中。

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>',RouterLink]
)
class Child {}

//
//
//

@Component(
  selector: 'index'
)
@View(
  template: '''
  <router-outlet></router-outlet>
            ''',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);
    }

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

String expected
STACKTRACE:
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(版本候选),路由器链路的 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';
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读