routing - redireccionar - rutas angular 5

Error angular 2: no se pueden resolver todos los parámetros para ''RouteParams''

Question

Tratando de usar RouteParams para obtener parámetros de cadena de consulta, pero acabo de recibir el error

No se pueden resolver todos los parámetros para ''RouteParams'' (?). Asegúrese de que todos los parámetros estén decorados con Inject o que tengan anotaciones de tipo válidas y que ''RouteParams'' esté decorado con Injectable. angular2-polyfills.js: 332 Error: No se puede leer la propiedad ''getOptional'' de undefined .......

Mira esto Plnkr . ¿Cómo puedo usar RouteParams sin obtener esta advertencia?

Los archivos importantes son:

boot.ts :

import {bootstrap} from ''angular2/platform/browser'';
import {ROUTER_PROVIDERS, RouteParams} from ''angular2/router'';
import {AppComponent} from ''./app/app.component'';

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

y app.component.ts :

import {Component, OnInit} from ''angular2/core'';
import {RouteParams} from "angular2/router";

@Component({
  selector: ''app'',
  template: `
    <p *ngIf="guid">guid gived is: {{guid}}</p>
    <p *ngIf="!guid">No guid given in query-string in URL</p>
  `
})
export class AppComponent implements OnInit {
  guid:string;

  constructor(private _params: RouteParams) {} //

  ngOnInit() {
    this.guid = this._params.get(''guid'');
  }

}

Actualizar:

No tengo ninguna ruta, solo tengo la ruta raíz predeterminada (si se puede llamar una ruta cuando no tengo otras rutas ...). Pero como sugirió Gianluca, agregué la siguiente configuración de ruta:

@RouteConfig([
  { path: ''/:guid'', name: ''Home'', component: AppComponent, useAsDefault: true },
])

Pero sigo teniendo el mismo error (se actualiza el Plnkr ) ...

Answer 1

¿Ha especificado guid en @RouteConfig?

@RouteConfig([
  {path: ''/something/:guid'', name: ''Something'', component: Something}
])

Answer 2

Después de ver la respuesta correcta y aceptada a Günter, quería agregar una respuesta mía (hice la pregunta original).

Esto es realmente excesivo para mi caso: no tengo enrutamiento (tengo solo una página de una sola página), así que debo:

• traer otro componente "externo" (RouteConfig)
• crea un componente dedicado con la configuración del enrutador y la plantilla base del enrutador (con <router-outlet></router-outlet> )
• Inyectar RouteParams en el componente donde quiero usar el parámetro de cadena de consulta

Y finalmente, puedo acceder al parámetro de cadena de consulta ...

En mi caso (con solo un parámetro), simplemente hice este one-liner (repartido en 4 líneas para facilitar la lectura):

this.myParameter = window.location.href
  .slice(window.location.href.indexOf(''?'') + 1)
  .split(''&'')[0]
  .split(''='')[1];

Answer 3

No entiendo tu problema correctamente, pero sí, como dijiste en el comentario

¿Hay alguna otra forma de obtener los parámetros de consulta de URL?

De lo que podemos enviar mediante el uso data propiedad de data , podemos enviar datos a través del enrutamiento utilizando data propiedad de data de la @RouteConfig annotation proporcionada por angualr2. Al usar esta propiedad, podemos enviar datos adicionales a los componentes en el momento de la configuración de la ruta sin mostrarlo en la URL. aquí hay un ejemplo de esta propiedad.

@RouteConfig([
    {path: ''/product/:id'', component: ProductDetailComponentParam,
     as: ''ProductDetail'', data: {isProd: true}}])

export class ProductDetailComponentParam {
    productID: string;
    constructor(params: RouteParams, data: RouteData) {
        this.productID = params.get(''id'');

        console.log(''Is this prod environment'', data.get(''isProd''));
    }
}

al usar esto podemos enviar datos a través del enrutamiento sin mostrar en la URL.

Plunker - ejemplo de trabajo de la misma

para más información, lee esta impresionante artical

ver también -

• Parámetro de enrutador en Angular2

Answer 4

Eliminar RouteParams de

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

RouteParams es provisto por el enrutador. Si lo proporciona usted mismo inyectándolo, falla.

Consulte https://angular.io/api/router/Params para ver un ejemplo. RouteParams solo se puede inyectar en componentes agregados por el enrutador.

Ejemplo de Plunker