javascript - 双向绑定(bind)的编码值

Question

我有两种方式绑定(bind)我的组件上的属性。目的是从用户那里获取一个 URL，然后重定向到 /report/<url>。 .

问题是它在 url 上发出尖叫声并重定向到 report/http%3A并错过了域。

这是我目前所拥有的:

HTML

<input type='text' [(ngModel)]='testUrl' />
<button class='btn btn-primary'(click)='checkMobile()'>Check Site</button>

组件

import { Component }  from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
    selector: "check-mobile",
    templateUrl: "app/check-mobile.component.html"
})
export class CheckMobileComponent{
    testUrl: string;

    constructor(private router: Router)
    {

    }

    checkMobile() : void {

        var escapedUrl = encodeURI(this.testUrl);
        this.router.navigateByUrl('/report/' + escapedUrl);
    }
}

我做错了什么？

Answer 1

使用QueryEncoder由 Angular 2 提供。这样做

import { QueryEncoder } from '@angular/http';

var encodedUrl = new QueryEncoder().encodeValue(this.testUrl);
this.router.navigate(['/report/' + escapedUrl]);