redireccionar - rutas angular 6
Excepción Angular2: no se puede vincular a ''routerLink'' ya que no es una propiedad nativa conocida (12)
¡Realmente aprecio la respuesta de @ raykrow cuando uno tiene este problema solo en un archivo de prueba! Ahí es donde lo encontré.
Como a menudo es útil tener otra forma de hacer algo como copia de seguridad, quería mencionar esta técnica que también funciona (en lugar de importar
RouterTestingModule
):
import { MockComponent } from ''ng2-mock-component'';
. . .
TestBed.configureTestingModule({
declarations: [
MockComponent({
selector: ''a'',
inputs: [ ''routerLink'', ''routerLinkActiveOptions'' ]
}),
. . .
]
(Normalmente, uno usaría
routerLink
en un elemento
<a>
pero ajustaría el selector en consecuencia para otros componentes).
La segunda razón por la que quería mencionar esta solución alternativa es que, aunque me sirvió bien en varios archivos de especificaciones, me encontré con un problema en un caso:
Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component''s selector can match a given element.
Conflicting components: ButtonComponent,Mock
No pude entender cómo este simulacro y mi
ButtonComponent
estaban usando el mismo selector, por lo que la búsqueda de un enfoque alternativo me llevó a la solución de @ raykrow.
Obviamente, la versión beta de Angular2 es más nueva que nueva, por lo que no hay mucha información disponible, pero estoy tratando de hacer lo que creo que es un enrutamiento bastante básico.
Hackear con el código de inicio rápido y otros fragmentos del sitio web https://angular.io ha dado como resultado la siguiente estructura de archivos:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
Con los archivos que se rellenan de la siguiente manera:
index.html
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: ''register'',
defaultExtension: ''js''
}
}
});
System.import(''app/boot'')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
boot.ts
import {bootstrap} from ''angular2/platform/browser''
import {ROUTER_PROVIDERS} from ''angular2/router'';
import {AppComponent} from ''./app.component''
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
app.component.ts
import {Component} from ''angular2/core'';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from ''angular2/router'';
import {RoutingTestComponent} from ''./routing-test.component'';
@Component({
selector: ''my-app'',
template: `
<h1>Component Router</h1>
<a [routerLink]="[''RoutingTest'']">Routing Test</a>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path:''/routing-test'', name: ''RoutingTest'', component: RoutingTestComponent, useAsDefault: true},
])
export class AppComponent { }
routing-test.component.ts
import {Component} from ''angular2/core'';
import {Router} from ''angular2/router'';
@Component({
template: `
<h2>Routing Test</h2>
<p>Interesting stuff goes here!</p>
`
})
export class RoutingTestComponent { }
Intentar ejecutar este código produce el error:
EXCEPTION: Template parse errors:
Can''t bind to ''routerLink'' since it isn''t a known native property ("
<h1>Component Router</h1>
<a [ERROR ->][routerLink]="[''RoutingTest'']">Routing Test</a>
<router-outlet></router-outlet>
"): AppComponent@2:11
Encontré un problema vagamente relacionado aquí; directivas de enlace de enrutador rotas después de actualizar a angular2.0.0-beta.0 . Sin embargo, el "ejemplo de trabajo" en una de las respuestas se basa en el código pre-beta, que bien podría funcionar, pero me gustaría saber por qué el código que he creado no funciona.
Cualquier sugerencia sería gratamente recibida!
En general, cada vez que obtiene un error como
Can''t bind to ''xxx'' since it isn''t a known native property
, la causa más probable es olvidarse de especificar un componente o una directiva (o una constante que contiene el componente o el directiva) en la matriz de metadatos de
directives
.
Tal es el caso aquí.
Como no especificó
RouterLink
o la constante
ROUTER_DIRECTIVES
, que
contiene lo siguiente
:
export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref,
RouterLinkActive];
- en la matriz de
directives
, luego cuando Angular analiza
<a [routerLink]="[''RoutingTest'']">Routing Test</a>
no conoce la
directiva RouterLink
(que usa el selector de
atributos
routerLink
).
Dado que Angular sabe qué es
a
elemento, se supone que
[routerLink]="..."
es un enlace de
propiedad
para
a
elemento.
Pero luego descubre que
routerLink
no es una propiedad nativa de
a
elemento, por lo tanto, arroja la excepción sobre la propiedad desconocida.
Nunca me ha gustado realmente la ambigüedad de la sintaxis . Es decir, considera
<something [whatIsThis]="..." ...>
Con solo mirar el HTML no podemos saber si es esto
-
una propiedad nativa de
something - selector de atributos de una directiva
-
una propiedad de entrada de
something
Tenemos que saber qué
directives: [...]
se especifican en los metadatos del componente / directiva para interpretar mentalmente el HTML.
Y cuando olvidamos poner algo en la matriz de
directives
, siento que esta ambigüedad hace que sea un poco más difícil de depurar.
En mi caso, importé el RouterModule en el módulo de la aplicación pero no importé en mi módulo de funciones. Después de importar el módulo de enrutador en mi EventModule, el error desaparece.
import {NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import {EventListComponent} from ''./EventList.Component'';
import {EventThumbnailComponent} from ''./EventThumbnail.Component'';
import { EventService } from ''./shared/Event.Service''
import {ToastrService} from ''../shared/toastr.service'';
import {EventDetailsComponent} from ''./event-details/event.details.component'';
import { RouterModule } from "@angular/router";
@NgModule({
imports:[BrowserModule,RouterModule],
declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
providers: [EventService,ToastrService]
})
export class EventModule {
}
He probado todos los métodos, que se mencionan anteriormente. Pero ningún método funciona para mí. Finalmente obtuve una solución para el problema anterior y está funcionando para mí.
Probé este método:
En HTML:
<li><a (click)= "aboutPageLoad()" routerLinkActive="active">About</a></li>
En el archivo TS:
aboutPageLoad() {
this.router.navigate([''/about'']);
}
Mi solución es simple. Estoy usando [href] en lugar de [routerLink]. He probado todas las soluciones para [routerLink]. Ninguno de ellos funciona en mi caso.
Aquí está mi solución:
<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>
Luego escriba la función
getPlanUrl
en el archivo TS.
Para las personas que encuentran esto cuando intentan ejecutar pruebas porque a través de
npm test
o
ng test
usando Karma o cualquier otra cosa.
Su módulo .spec necesita una importación de prueba de enrutador especial para poder construir.
import { RouterTestingModule } from ''@angular/router/testing'';
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/
Si obtiene este error durante la prueba de la unidad, escríbalo.
import { RouterTestingModule } from ''@angular/router/testing'';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
}));
Si usa módulos compartidos, simplemente agregue RouterModule a un Módulo donde se declare su componente y no olvide agregar
<router-outlet></router-outlet>
Referenciado desde aquí RouterLink no funciona
Tienes en tu modulo
import {Routes, RouterModule} from ''@angular/router'';
tienes que exportar el módulo RouteModule
ejemplo:
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
para poder acceder a las funcionalidades para todos los que importan este módulo.
> = RC.5
importar el
RouterModule
Consulte también
https://angular.io/guide/router
@NgModule({
imports: [RouterModule],
...
})
> = RC.2
app.routes.ts
import { provideRouter, RouterConfig } from ''@angular/router'';
export const routes: RouterConfig = [
...
];
export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];
main.ts
import { bootstrap } from ''@angular/platform-browser-dynamic'';
import { APP_ROUTER_PROVIDERS } from ''./app.routes'';
bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);
<= RC.1
Falta tu código
@Component({
...
directives: [ROUTER_DIRECTIVES],
...)}
No puede usar directivas como
routerLink
o
router-outlet
sin que su componente las conozca.
Si bien los nombres de las directivas se cambiaron para que distingan entre mayúsculas y minúsculas en Angular2, los elementos aún usan
-
en el nombre como
<router-outlet>
para ser compatibles con la especificación de componentes web que requieren un
-
en el nombre de elementos personalizados.
registrarse a nivel mundial
Para que
ROUTER_DIRECTIVES
esté disponible globalmente, agregue este proveedor a
bootstrap(...)
:
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
entonces ya no es necesario agregar
ROUTER_DIRECTIVES
a cada componente.
Palabra de precaución al codificar con Visual Studio (2013)
He perdido 4 a 5 horas tratando de depurar este error.
Probé todas las soluciones que encontré en por letra y todavía recibí este error:
Can''t bind to ''routerlink'' since it isn''t a known native property
Tenga en cuenta que Visual Studio tiene el desagradable habito de autoformatar texto cuando copia / pega código. Siempre obtuve un pequeño ajuste instantáneo de VS13 (el caso del camello desaparece).
Esta:
<div>
<a [routerLink]="[''/catalog'']">Catalog</a>
<a [routerLink]="[''/summary'']">Summary</a>
</div>
Se convierte en:
<div>
<a [routerlink]="[''/catalog'']">Catalog</a>
<a [routerlink]="[''/summary'']">Summary</a>
</div>
Es una pequeña diferencia, pero suficiente para provocar el error. La parte más fea es que esta pequeña diferencia seguía evitando mi atención cada vez que copiaba y pegaba. Por pura casualidad vi esta pequeña diferencia y la resolví.
Para> = V5
import { RouterModule, Routes } from ''@angular/router'';
const appRoutes: Routes = [
{path:''routing-test'', component: RoutingTestComponent}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
]
})
componente:
@Component({
selector: ''my-app'',
template: `
<h1>Component Router</h1>
<a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
<router-outlet></router-outlet>
`
})
Para <V5
También puede usar
RouterLink
como
directives
es decir.
directives: [RouterLink]
.
eso funcionó para mí
import {Router, RouteParams, RouterLink} from ''angular2/router'';
@Component({
selector: ''my-app'',
directives: [RouterLink],
template: `
<h1>Component Router</h1>
<a [routerLink]="[''RoutingTest'']">Routing Test</a>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path:''/routing-test'', name: ''RoutingTest'', component: RoutingTestComponent, useAsDefault: true},
])