Angular2: не удается перейти к URL-адресу, используя location.go(url)

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

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

Ответы

Ответ 1

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

Документация по местоположению строго упоминается ниже.

Примечание. Лучше использовать службу Router для запуска изменений маршрута. использование Расположение только в том случае, если вам нужно взаимодействовать с или создавать нормализованные 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, который отвечает за загрузку Component и сделает доступной для компонента такую, как 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 был в бета-версии.