Không thể liên kết với 'routerLink' vì nó không phải là tài sản đã biết

Question

Gần đây, tôi đã bắt đầu chơi với góc cạnh 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 vì lợi ích của việc học 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à phụ huynh ở số 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

Bây giờ tôi hiểu một phần tôi đoán rằng kể từ khi thành phần đó là một wrapper quanh router-outlet nó sẽ không có thể theo cách này để truy cập 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 rất sẵn lòng 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ó phiên bản ổn định @angular/router 3.3.1. 2- Trong mô-đun app 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 { } 

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 {} 

Tuyến Tôi cố gắng để truy cập được phân cấp từ một module đó là UsersModule

người dùng-rou ting.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 để di chuyển từ một thành phần là một phần của các mô-đun Layout, nhưng không có khái niệm về các mô-đun bộ định tuyến. Đó có phải là điều gây ra lỗi không.

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{} 

tôi đang cố gắng để di chuyển từ HeaderComponent. Tôi rất sẵn lòng cung cấp thêm thông tin nếu cần.

Answer 1

Bạn cần phải thêm RouterModule-imports của mỗi @NgModule() nơi các thành phần sử dụng bất kỳ thành phần hoặc chỉ thị nào từ (trong trường hợp này là routerLink và <router-outlet>.

declarations: [] là tạo thành phần, chỉ thị, đường ống, được biết đến bên trong mô-đun hiện tại.

exports: [] là tạo thành phần, chỉ thị, đường ống, có sẵn để nhập mô-đun. Những gì được thêm vào declarations chỉ là riêng tư cho mô-đun. exports đặt chúng ở chế độ công khai.

Answer 2

Bạn đang thiếu gói phần mềm tuyến đường hoặc bao gồm mô-đun bộ định tuyến trong mô-đun ứng dụng chính của mình.

đảm bảo package.config của bạn có này:

"@angular/router": "^3.3.1" 

Sau đó, trong ứng dụng của bạn.Module nhập khẩu router và cấu hình các tuyến đường:

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

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

Cập nhật:

Di chuyển AppRoutingModule để là người đầu tiên trong nhập khẩu:

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