Question

我正尝试使用typescript函数中的location.go服务导航到特定网址。它会更改浏览器中的URL，但URL的组件不会反映在屏幕中。它保留在登录（实际）屏幕上 - 比如说：

constructor(location: Location, public _userdetails: userdetails){
    this.location = location;
}
login(){
    if (this.username && this.password){
        this._userdetails.username = this.username;
        this.location.go('/home');
    }
    else{
        console.log('Cannot be blank');
    }
}

我缺少编译方法或刷新方法吗？

Answer 1

是的，要从一个路由重定向到另一个路由，您不应该使用location.go，它通常用于在浏览器上获取normalized url。

Location docs严格提到了以下说明。

注意：使用路由器服务触发路由更改会更好。使用仅当您需要与规则化URL进行交互或创建规范化URL时的位置在路由之外。

相反，您应该使用Router API的navigate方法，在使用['routeName']指令创建href时使用[routerLink]

如果您只想通过网址重定向，那么您可以使用navigateByUrl将{URL router.navigateByUrl(url)

作为字符串

import { 
  ROUTER_DIRECTIVES, 
  RouteConfig, 
  ROUTER_PROVIDERS, 
  Location, //note: in newer angular2 versions Location has been moved from router to common package
  Router 
} from 'angular2/router';

constructor(location: Location, 
            public _userdetails: userdetails,
            public _router: Router){
    this.location = location;
}
login(){
    if (this.username && this.password){
        this._userdetails.username = this.username;
        //I assumed your `/home` route name is `Home`
        this._router.navigate(['Home']); //this will navigate to Home state.
        //below way is to navigate by URL
        //this.router.navigateByUrl('/home')
    }
    else{
        console.log('Cannot be blank');
    }
}

<强>更新

在进一步的研究中，我发现，当你调用navigate时，基本上它接受了数组内部的routeName，如果有参数，那么应该像['routeName', {id: 1, name: 'Test'}]一样通过它。

以下是navigate的{{1}}函数的API。

Router

当Router.prototype.navigate = function(linkParams) { var instruction = this.generate(linkParams); //get instruction by look up RouteRegistry return this.navigateByInstruction(instruction, false); };传递给linkParams函数时，它会返回导出其他组件所需的所有Instruction。此处generate表示ComponentInstruction，其中包含有关路由的所有信息，基本上我们在Instruction内注册的内容，将被添加到@RouteConfig（例如{ {1}} RouteRegistry应分配给path）的{1}}。

现在检索到的指令被传递给Component方法，该方法负责加载组件，并使各种组件可用于router-outlet＆amp;组件等组件。父母与父母子组件指令，如果它们在那里。

说明（在控制台中）

navigateByInstruction

注意：当Angular 2处于测试阶段时，整个答案都是基于较旧的路由器版本。

Angular2：无法使用location.go（url）导航到url

1 个答案: