これは既知のプロパティではないため、 'routerLink'にバインドできません。

Question

最近、私はアングル2でプレイし始めました。これまでのところ素晴らしいです。だから、私はangular-cliを使って学習のためにデモ個人プロジェクトを始めました。

基本的なルーティング設定では、ヘッダーからいくつかのルートに移動しますが、私のヘッダーはrouter-outletの親であるため、このエラーが表示されます。

app.component.html

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

header.component.htmlは今、私はそのコンポーネントがrouter-outlet周りのラッパーであるので、それはないだろうと推測し、部分的に理解この方法でrouterにアクセスすることができます。だから、このようなシナリオのために外部からナビゲーションにアクセスする可能性はありますか？

必要に応じてさらに情報を追加して本当にうれしいです。前もって感謝します。

更新

1 - 私のpackage.jsonはすでに安定した@angular/router 3.3.1バージョンがあります。 2 - 私のメインのappモジュールで、routing-moduleをインポートしました。下記を参照してください。

は

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

アプリ-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 {} 

私がアクセスしようとしているルートがUsersModuleある別のmoduleから委譲さをapp.module.ts

user-rou私はLayoutモジュールの一部であるコンポーネントから移動しようとしていますが

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

をting.module.tsが、ルータモジュールの概念はありません。それがエラーの原因です。

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

私はHeaderComponentから移動しようとしています。必要に応じてより多くの情報を提供できることを嬉しく思います。

Answer 1

あなたは、すべてのimportsにRouterModuleを追加する必要があります@NgModule()コンポーネントは、コンポーネントまたはディレクティブを使用します（この場合、routerLinkおよび<router-outlet>。

declarations: []は、現在のモジュール内で知られているコンポーネント、ディレクティブ、パイプを作成することです。

exports: []は、モジュールをインポートするためのコンポーネント、ディレクティブ、パイプを作成することです。 declarationsに追加されるのはモジュール専用です。 exportsは公開します。

Answer 2

ルートパッケージが含まれていないか、メインのアプリケーションモジュールにルータモジュールが含まれていません。あなたのアプリに続いて

"@angular/router": "^3.3.1" 

：

は、あなたのpackage.configがこれを持っていることを確認してください。モジュールは、ルータをインポートして、ルートを設定：

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

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

更新：

輸入に最初にするAppRoutingModuleを移動：

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