Angular2:无法使用 location.go(url) 导航到 url [英] Angular2: unable to navigate to url using location.go(url)

问题描述

我正在尝试使用 typescript 函数中的 location.go 服务导航到特定 url.它更改了浏览器中的 url，但 url 的组成部分并未反映在屏幕上.它停留在登录(实际)屏幕上 - 例如:

constructor(location: Location, public _userdetails: userdetails){this.location = 位置；}登录(){if (this.username && this.password){this._userdetails.username = this.username;this.location.go('/home');}别的{console.log('不能为空');}}

是否有我缺少的编译方法或刷新方法?

解决方案

是的，从一个路由重定向到另一个路由你不应该使用 location.go，它通常用于获取 浏览器上的标准化网址.

位置文档 已严格提及以下注意事项.

<块引用>

注意:最好使用Router服务来触发路由变化.用仅当您需要与规范化 URL 交互或创建规范化 URL 时才定位路由之外.

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

如果您只想通过 URL 重定向，则可以使用 navigateByUrl 将 URL 作为字符串，如 router.navigateByUrl(url)

import {ROUTER_DIRECIVES，路由配置，ROUTER_PROVIDERS,位置，//注意:在较新的 angular2 版本中，位置已从路由器移动到通用包路由器来自'angular2/路由器';构造函数(位置:位置，公共_userdetails:用户详细信息，公共_路由器:路由器){this.location = 位置；}登录(){if (this.username && this.password){this._userdetails.username = this.username;//我假设你的`/home`路由名称是`Home`this._router.navigate(['Home']);//这将导航到主页状态.//下面的方法是通过URL导航//this.router.navigateByUrl('/home')}别的{console.log('不能为空');}}

更新

在进一步研究中，我发现，当您调用 navigate 时，基本上它确实接受数组内的 routeName，如果有参数，则应该像['routeName', {id: 1, name: 'Test'}].

下面是Router的navigate函数的API.

Router.prototype.navigate = function(linkParams) {var 指令 = this.generate(linkParams);//通过查找RouteRegistry获取指令返回 this.navigateByInstruction(instruction, false);};

当 linkParams 传递给 generate 函数时，它确实返回所有 Instruction 需要在其他组件上导航.这里Instruction 的意思是ComponentInstruction 包含有关路由的所有信息，基本上我们在 @RouteConfig 中注册的任何内容都会被添加到 RouteRegistry>(比如在什么path上，Component应该分配给router-outlet).

现在检索到的指令被传递给 navigateByInstruction 方法，该方法负责加载组件，并将使各种内容可供组件使用，例如 urlParams &父母与子组件指令(如果存在).

说明(在控制台中)

auxInstruction: Object//<- 父指令child: null//<- 子指令component: ComponentInstruction//<-当前组件对象特异性:10000urlParams: Array[0] <-- 为路由传递的参数urlPath: "about"//<-- 当前url路径

<块引用>

注意:整个答案基于旧路由器版本，当 Angular 2 处于测试版时.

I am trying to navigate to a specific url using location.go service from typescript function. It changes the url in the browser but the component of the url is not reflected in the screen. It stays on the login (actual) screen - say for eg:

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');
    }
}

Is there a compile method or a refresh method I am missing?

解决方案

Yes, for redirecting from one route to another you should not be using location.go, it generally used to get normalized url on browser.

Location docs has strictly mentioned below note.

Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing.

Rather you should use Router API's navigate method, which will take ['routeName'] as you do it while creating href using [routerLink] directive.

If you wanted redirect via URL only then you could use navigateByUrl which takes URL as string like 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');
    }
}

Update

In further study, I found that, when you call navigate, basically it does accept routeName inside array, and if parameters are there then should get pass with it like ['routeName', {id: 1, name: 'Test'}].

Below is API of navigate function of Router.

Router.prototype.navigate = function(linkParams) {
  var instruction = this.generate(linkParams); //get instruction by look up RouteRegistry
  return this.navigateByInstruction(instruction, false);
};

When linkParams passed to generate function, it does return out all the Instruction's required to navigate on other compoent. Here Instruction means ComponentInstruction's which have all information about Routing, basically what ever we register inside @RouteConfig, will get added to RouteRegistry(like on what path which Component should assign to to router-outlet).

Now retrieved Instruction's gets passed to navigateByInstruction method, which is responsible to load Component and will make various thing available to component like urlParams & parent & child component instruction, if they are there.

Instruction (in console)

auxInstruction: Object //<- parent instructions
child: null //<- child instructions
component: ComponentInstruction //<-current component object
specificity: 10000
urlParams: Array[0] <-- parameter passed for the route
urlPath: "about" //<-- current url path

Note: Whole answer is based on older router version, when Angular 2 was in beta release.

这篇关于Angular2:无法使用 location.go(url) 导航到 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！