Gần đây, tôi đã bắt đầu chơi với góc 2. Thật tuyệt vời cho đến nay. Vì vậy, tôi đã bắt đầu một dự án cá nhân demo cho mục đích học tập bằng cách sử dụng angular-cli.
Với thiết lập định tuyến cơ bản, bây giờ tôi muốn điều hướng đến một số tuyến từ tiêu đề, nhưng vì tiêu đề của tôi là cha mẹ đến router-outlet, tôi nhận được lỗi này.
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>Bây giờ tôi đã hiểu một phần tôi đoán rằng vì thành phần đó là một trình bao bọc xung quanh router-outletnên không thể truy cập theo cách này router. Vì vậy, có khả năng truy cập điều hướng từ bên ngoài cho một kịch bản như thế này?
Tôi sẽ rất vui khi thêm bất kỳ thông tin nào nếu cần. Cảm ơn bạn trước.
Cập nhật
1- My package.jsonđã có @angular/router 3.3.1phiên bản ổn định . 2- Trong appmô-đun chính của tôi , tôi đã nhập routing-module. Vui lòng xem bên dưới.
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 { }ứng dụng định tuyến.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 {}Con đường tôi đang cố gắng để truy cập được phân cấp từ khác moduleđó làUsersModule
user-định tuyến.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 { }Trong khi tôi đang cố gắng điều hướng từ một thành phần là một phần của Layoutmô-đun, nhưng không có khái niệm về mô-đun bộ định tuyến. Có phải đó là những gì gây ra lỗi.
Giao diện.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{}Tôi đang cố gắng điều hướng từ HeaderComponent. Tôi sẽ vui lòng cung cấp thêm thông tin nếu cần.
RouterModulevào imports: []tất cả các mô-đun nơi bạn sử dụng routerLinkhoặc<router-outlet>
AppRoutingModuletrướcLayoutModule