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.
RouterModulezu imports: []allen Modulen hinzugefügt , in denen Sie routerLinkoder<router-outlet>
AppRoutingModulevorLayoutModule