Question:在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);
}

Here's my approach:

我认为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);
    }

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

应为字符串

1.闪烁元素.setAttribute_Callback_2_(省道:闪烁:7566)

2元素.setAttribute(DART:HTML:13673)

3.浏览器适配器.setAttribute(包:angular2/src/dom/browser_adapter.dart:258:25)

4路由链接.ONALCHANGESDONE(包:angular2/src/router/router_link.dart:66:23)

推荐答案

从ANGLING 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';
}

Angular相关问答推荐

未在ng bootstrap 模式中设置表单输入

带输入的单位测试Angular 分量.需要

如何包装NGB carousel ?

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

具有多个输入的Angular struct 指令在第一次加载构件时没有值

角路径S异步旋转变压器仍可观察到

如果Rxjs间隔请求仍在进行,则不应重置,但如果用户更改输入,则应重置

为什么初始化值为 1 的BehaviorSubject 不能分配给类型number?

如何从2个api获取数据并查看Angular material 表中的数据?

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

如何在 Angular 中顺序执行回调

如何有条件地更新 Angular 路由解析器数据?

您如何链接需要多个先前可观察对象的依赖订阅

如何从 RxJS 重试中排除某些 url

无法推送 Angular 项目 - Github

如何在Angular2中基于特定的构建环境注入不同的服务?

类型错误:无法读取未定义的属性

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

未绑定断点 - VS Code | Chrome | Angular

Angular 2:组件交互,可选输入参数