Angular2 Routeur lien ne fonctionne pas

Mon routeur lien fonctionne à partir de la racine de la composante et le même lien ne fonctionne pas si je déplace le liens pour enfant composant. Le plunker code indique le lien de travail et de non lien de travail. Je vous remercie à l'avance. Ci-dessous est la ne pas des liens de travail.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

Plunker code avec la question

OriginalL'auteur balaG | 2016-11-11

  1. 22

    Vous devez importer RouterModule dans votre AppLayoutModule de sorte qu'il semble comme suit:

    import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppLayout} from './layout.component';
import {RouterModule} from '@angular/router';

@NgModule({
    imports: [ BrowserModule, RouterModule ],
    declarations: [ AppLayout ],
    exports: [ AppLayout ]
})

export class AppLayoutModule {}

    Sans ce composant ne savais pas ce que le routerLink est et ne pas compiler pour corriger href attributs.

    Mis À Jour Plunker ici

    Salut @Marcin, je suis curieux, RouterModule a été importé dans AppRoutingModule, il doit être visible pour tous les autres modules de fonctionnalités, de sorte que je me trompe?
    il n'est pas visible parce que les modules n'héritent pas l'accès aux composants, fournisseurs, etc. d'autres modules. Ainsi, ce qui est importé par AppModule n'est pas accessible et visible pour AppLayoutModule.
    Salut @Marcin, merci de vous répondre. Cela me troublait beaucoup. Donc, si j'ai un tiers de module Un qui déclare quelques components, u veux dire que je ne peut pas les utiliser de toute autre fonctionnalité modules si je viens de import de ce module en module racine? C'est un peu bizarre, et si ce module nécessite un forRoot de configuration? Dois-je import & config dans chaque fonctionnalité du module dépend-il?
    oui, vous devez les importer cette troisième partie du module dans chaque élément de module qui utilise des composants, car il n'y a pas d'héritage entre eux. Il y a plusieurs raisons d'une telle approche, d'abord, en raison de la possibilité de chargement paresseux - vous pouvez charger les modules, avec des composants nécessaires pour que cela fonctionne, et ils n'ont pas à être chargé dans le module racine. L'autre est que, chaque module doit être mis en place de manière à ce que vous êtes en mesure de les réutiliser dans l'application d'autres - autres module parent, de sorte qu'il devrait être auto-suffisant. J'espère que c'est plus clair pour vous maintenant.
    Vous savez quoi? Vous avez sauvé mon week-end 🙂 je suis un peu déçu, qui angulaire (>=4) ne semble pas reckognise le manque RouterModule et silencieusement ignore juste les routerLink directives.

    OriginalL'auteur Marcin

  2. 1

    Pour la routerlink de travail, vous devez importer le Routeur à la composante où vous travaillez

    Exemple

    Import {Component} from '@ angular /core';
Import {Router} from '@ angular /router';

@Component ({
Selector: 'my-menu',
template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</Div>
,}) 
Export class AppLayout{}

    Merci!

    OriginalL'auteur Daniel Garcia

  3. 0

    Si c'était un composant autonome qui a été importé dans un module, alors vous pourriez aussi bien il suffit d'ajouter le RouterModule les importations de votre module. Je voudrais avoir le module de déclarations dans mon propre fichier donc une solution ici serait de disposer d'application du module.

    import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppLayoutModule} from '...'; <--could also be a component

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppLayoutModule,
        BrowserModule,
        RouterModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

    La seule chose que vous devez être sûr, c'est que le RouterModule est importé dans le module qui utilise le routerLink directive, soit dans le fichier de module ou le fichier de composant.

    OriginalL'auteur Jan Morten Sørensen