navigate - Angular2: no se puede navegar a la url usando location.go(url)

router.navigate angular 6

Question

Estoy tratando de navegar a una url específica usando el servicio location.go de la función de escritura. Cambia la url en el navegador, pero el componente de la url no se refleja en la pantalla. Permanece en la pantalla de inicio de sesión (real), por ejemplo, por ejemplo:

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

¿Hay un método de compilación o un método de actualización que estoy perdiendo?

Answer 1

Sí, para redirigir de una ruta a otra no debería usar location.go , generalmente se utiliza para obtener la normalized url en el navegador.

Documentos de ubicación ha mencionado estrictamente a continuación la nota.

Nota: es mejor usar el servicio de enrutador para activar cambios de ruta. Use Ubicación solo si necesita interactuar con o crear URL normalizadas fuera del enrutamiento.

En su lugar, debe usar el método de navigate la API del Router , que tomará [''routeName''] mientras lo hace mientras crea href usando la directiva [routerLink] .

Si deseara redireccionar solo a través de la URL, entonces podría usar router.navigateByUrl(url) que toma la URL como una cadena como 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'');
    }
}

Actualizar

En un estudio adicional, descubrí que, cuando se llama a navigate , básicamente se acepta routeName dentro de la matriz, y si hay parámetros, entonces se deben pasar con ellos como [''routeName'', {id: 1, name: ''Test''}] .

A continuación se muestra la API de la función de navigate del Router .

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

Cuando linkParams pasó a la función de generate , devuelve todas las Instruction necesarias para navegar en otro componente. Aquí, Instruction significa ComponentInstruction ''s que tienen toda la información sobre Enrutamiento, básicamente lo que registramos dentro de @RouteConfig , se agregará a RouteRegistry (como en qué path debe asignar Component al router-outlet ).

Ahora recuperado, la instrucción se pasa al método urlParams , que es responsable de cargar el Componente y hará que varias cosas estén disponibles para el componente como urlParams y la instrucción del componente padre e hijo, si están allí.

Instrucción (en consola)

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

Nota: la respuesta completa se basa en una versión anterior del enrutador, cuando Angular 2 estaba en versión beta.