Angular2: невозможно перейти к URL-адресу с помощью location.go (url)

Я пытаюсь перейти к определенному URL-адресу, используя службу 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');
    }
}

Есть ли метод компиляции или метод обновления, который мне не хватает?


person Gary    schedule 21.02.2016    source источник
comment
попробуйте использовать router.navigate(['your route'])   -  person Pardeep Jain    schedule 21.02.2016


Ответы (1)


Да, для перенаправления с одного маршрута на другой вы не должны использовать location.go, обычно он используется для получения normalized url в браузере.

Location docs строго упомянутое ниже примечание.

Примечание. Для изменения маршрута лучше использовать службу маршрутизатора. Используйте Location только в том случае, если вам нужно взаимодействовать или создавать нормализованные URL-адреса вне маршрутизации.

Вместо этого вам следует использовать метод Router API navigate, который будет принимать ['routeName'], как вы это делаете при создании href с помощью директивы [routerLink].

Если вы хотите перенаправить только через URL-адрес, вы можете использовать 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'}].

Ниже приведен API navigate функции Router.

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

Когда linkParams передается в функцию generate, она возвращает все Инструкция требуется для навигации по другому компоненту. Здесь Instruction означает ComponentInstruction. , которые содержат всю информацию о маршрутизации, в основном то, что мы регистрируем внутри @RouteConfig, будет добавлено к RouteRegistry (например, о том, что path, которое Component должно назначить router-outlet).

Теперь извлеченная инструкция передается методу navigateByInstruction, который отвечает за загрузку компонента и делает различные вещи доступными для компонента, такие как urlParams и инструкции родительского и дочернего компонентов, если они есть.

Инструкция (в консоли)

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

Примечание. Полный ответ основан на более старой версии маршрутизатора, когда Angular 2 находился в бета-версии.

person Pankaj Parkar    schedule 21.02.2016
comment
Почему бы не пройти location.go('url');? Мне удалось получить работу router.navigate. Как мне включить через это? Должен ли я прислушиваться к событиям и создавать экземпляр компонента ... Я не понимаю этого. Вы можете помочь? - person Gary; 21.02.2016
comment
@Gary Я постараюсь собрать подробности, почему location.go не загружается route component .. но почему вы полагаетесь на url изменение маршрута баз (и документ Angular2 также сделал так, чтобы не использовать Location api для изменения маршрута)? - person Pankaj Parkar; 21.02.2016
comment
Я думаю, что использование location.go на данном этапе - неправильное его использование. Я думаю, они должны были реализовать изменение маршрута на location.go .. Надеюсь, что api все еще находится в бета-версии. Надеюсь, что angular2 позаботится об этом случае. - person Pankaj Parkar; 21.02.2016
comment
@Gary, посмотри на обновленный ответ ... Я немного углубился в код и обновил свое понимание ... не стесняйтесь сказать мне, если что-то не так. - person Pankaj Parkar; 22.02.2016
comment
Это хорошее объяснение. специфика: 10000 это что? Какую цель это решает? Итак, если я вызову location.go, мне, возможно, придется взглянуть на реализацию navigateByInstruction с обещанием изменения маршрута. Это правильно, или я неправильно использовал navigateByInstruction? - person Gary; 22.02.2016
comment
@ Гэри, да. каким-то образом вам нужно поместить listner/observable поверх события изменения местоположения окна, и из этого вы можете вызвать метод router.navigateByUrl('/home') .. тогда он будет выполнять желаемые функции .. - person Pankaj Parkar; 22.02.2016
comment
Спасибо. Позвольте мне попробовать это, хотя не уверен, что это сработает. Use Location only if you need to interact with or create normalized URLs outside of routing. - person Gary; 22.02.2016
comment
Я просто добавлю сюда: import {Location} from 'angular2 / platform / common'; - person Kesarion; 15.05.2016