Angular2 Router 3.0 beta 1 - （路由器指令替换）

Question

您好我已经使用Angular 2 Beta 17版本实现了以下功能。

我在树组件上使用树路径如下（Angular2 Beta 17。），

<tree-view>
<tree-node [icon-class]="cssClass" [text]="text"  
  [treeRoute]="['/Detail',{ID: 10001}]" >        
</tree-node>
</tree-view>

Tree-route指令实现如下，

import { Directive, OnInit, ElementRef, Inject } from 'angular2/core';
import { Instruction, Router, Location } from 'angular2/router';

@Directive({
    selector: '[treeRoute]',
    inputs: ['routeParams: treeRoute'],
    host: {
        '[attr.href]': 'visibleHref'
    }
})
export class TreeRoute implements OnInit {

    private _routeParams: any[];
    private _navigationInstruction: Instruction;

    public visibleHref: string = '';

    constructor( @Inject(ElementRef) private _element: ElementRef, @Inject(Router) private _router: Router, @Inject(Location) private _location: Location) {
        _router.subscribe(_ => this.updateLink());
    }

    ngOnInit() {
        var elem = <HTMLElement>this._element.nativeElement;
        var span = <HTMLElement>elem.querySelector('li > div > div.tree-node-content > span.tree-node-title');

        if (span != undefined) {
            span.onclick = this.onClick.bind(this);
        }
    }

    set routeParams(changes: any[]) {
        this._routeParams = changes;
        this.updateLink();
    }

    updateLink() {
        this._navigationInstruction = this._router.generate(this._routeParams);
        var navigationHref = this._navigationInstruction.toLinkUrl();
        this.visibleHref = this._location.prepareExternalUrl(navigationHref);
    }

    onClick() {
        this._router.navigateByInstruction(this._navigationInstruction);
    }
}

现在，我想将我的angular2版本升级到最新的Angular2 RC4。我们还有新的路由器，@ angular / router：3.0.0-beta.1。

我试图重构我的方法并用UrlTree替换指令，但直到现在都没有成功。

import { Directive, OnInit, ElementRef, Inject } from '@angular/core';
import { Location } from '@angular/common';
import { Router, UrlTree } from '@angular/router';

@Directive({
    selector: '[treeRoute]',
    inputs: ['routeParams: treeRoute'],
    host: {
        '[attr.href]': 'visibleHref'
    }
})
export class TreeRouteDirective implements OnInit {

    private _routeParams: UrlTree;

    public visibleHref: string = '';

    constructor( @Inject(ElementRef) private _element: ElementRef, @Inject(Router) private _router: Router, @Inject(Location) private _location: Location) {        
    }

    ngOnInit() {
        var elem = <HTMLElement>this._element.nativeElement;
        var span = <HTMLElement>elem.querySelector('li > div > div.tree-node-content > span.tree-node-title');

        if (span != undefined) {
            span.onclick = this.onClick.bind(this);
        }
    }

    set routeParams(changes: UrlTree) {
        this._routeParams = changes;
        this.updateLink();
    }

    updateLink() {
        this.visibleHref = this._router.serializeUrl(this._routeParams); 
    }

    onClick() {
        this._router.navigateByUrl(this._routeParams);
    }
}

通过此实现，我得到如下错误，

有没有其他方法可以替换新路由器中的路由器指令？任何人都能帮助我，哪里做错了什么？

你的帮助会很明显！