Kann nicht an 'routerLink' gebunden werden, da dies keine bekannte Eigenschaft ist

Vor kurzem habe ich angefangen, mit Angular 2 zu spielen. Bisher ist es großartig. Also habe ich ein persönliches Demo-Projekt gestartet, um mit zu lernen angular-cli.

Mit der grundlegenden Routing-Einrichtung möchte ich jetzt vom Header zu einigen Routen navigieren. Da mein Header jedoch ein übergeordneter Header ist router-outlet, wird dieser Fehler angezeigt.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

  <a [routerLink]="['/signin']">Sign in</a>

Jetzt verstehe ich teilweise, dass, da diese Komponente ein Wrapper router-outletist, auf diese Weise kein Zugriff möglich wäre router. Gibt es für ein solches Szenario die Möglichkeit, von außen auf die Navigation zuzugreifen?

Gerne füge ich bei Bedarf weitere Informationen hinzu. Vielen Dank im Voraus.

Aktualisieren

1- Mein hat package.jsonbereits die stabile @angular/router 3.3.1Version. 2- In meinem appHauptmodul habe ich das importiert routing-module. Siehe unten.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from  './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(),
    LayoutModule,
    UsersModule,
    AppRoutingModule  --> This is the routing module. 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

Die Route, auf die ich zugreifen möchte, wird von einer anderen delegiert module, nämlich derUsersModule

user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';

const usersRoutes: Routes = [
  { path: 'signin',  component: SigninComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(usersRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class UsersRoutingModule { }

Ich versuche zwar, von einer Komponente aus zu navigieren, die Teil des LayoutModuls ist, aber keine Ahnung vom Routermodul hat. Ist es das, was den Fehler verursacht?

Layout.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}

Ich versuche von der zu navigieren HeaderComponent. Gerne stelle ich Ihnen bei Bedarf weitere Informationen zur Verfügung.

Sie müssen zu jedem Ort hinzufügen RouterModule, importsan @NgModule()dem Komponenten eine Komponente oder Direktive verwenden (in diesem Fall routerLinkund <router-outlet>.

declarations: [] besteht darin, Komponenten, Anweisungen und Rohre innerhalb des aktuellen Moduls bekannt zu machen.

exports: []besteht darin, Komponenten, Anweisungen und Pipes für den Import von Modulen verfügbar zu machen. Was nur hinzugefügt wird, declarationsist für das Modul privat. exportsmacht sie öffentlich.

Siehe auch https://angular.io/api/router/RouterModule#usage-notes

Sie vermissen entweder die Aufnahme des Routenpakets oder die Aufnahme des Routermoduls in Ihr Haupt-App-Modul.

Stellen Sie sicher, dass Ihre package.json Folgendes enthält:

"@angular/router": "^3.3.1"

Importieren Sie dann in Ihrem app.module den Router und konfigurieren Sie die Routen:

import { RouterModule } from '@angular/router';

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent}
        ])
    ],

Update :

Verschieben Sie das AppRoutingModule so, dass es bei den Importen an erster Stelle steht:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],

Ich werde einen weiteren Fall hinzufügen, in dem ich den gleichen Fehler bekam, aber nur ein Dummy war. Ich hatte hinzugefügt, [routerLinkActiveOptions]="{exact: true}"ohne noch hinzuzufügen routerLinkActive="active".

Mein falscher Code war

<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

wann es hätte sein sollen

<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

Ohne zu haben routerLinkActive, können Sie nicht haben routerLinkActiveOptions.

Wenn nichts anderes funktioniert, wenn es funktionieren sollte, starten Sie ng serve neu. Es ist traurig, diese Art von Fehlern zu finden.

In meinem Fall muss ich nur meine neu erstellte Komponente in RouterModule importieren

{path: 'newPath', component: newComponent}

Dann in Ihrem app.moduleImport den Router und konfigurieren Sie die Routen:

{RouterModule} aus '@ angle / router' importieren;

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent},
            {path: 'newPath', component: newComponent}
        ])
    ],

Hoffe das hilft jemandem !!!

Sie müssen sich fügen RouterMoudlein importsAbschnitte des Moduls die enthaltenden HeaderKomponente