Tidak dapat mengikat ke 'routerLink' karena itu bukan properti yang dikenal

Baru-baru ini, saya sudah mulai bermain dengan sudut 2. Sejauh ini sangat bagus. Jadi, saya sudah memulai proyek pribadi demo untuk keperluan belajar menggunakan angular-cli.

Dengan pengaturan perutean dasar, saya sekarang ingin menavigasi ke beberapa rute dari tajuk, tetapi karena tajuk saya adalah induk dari router-outlet, saya menerima kesalahan ini.

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>

Sekarang saya mengerti sebagian saya kira karena komponen itu adalah pembungkus di router-outletsekitarnya tidak akan mungkin cara ini untuk mengakses router. Jadi, apakah ada kemungkinan untuk mengakses navigasi dari luar untuk skenario seperti ini?

Saya akan sangat senang menambahkan informasi lebih lanjut jika diperlukan. Terima kasih sebelumnya.

Memperbarui

1- Saya package.jsonsudah memiliki @angular/router 3.3.1versi stabil . 2 - Dalam appmodul utama saya , saya telah mengimpor routing-module. Silahkan lihat di bawah ini.

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

Rute yang saya coba akses didelegasikan dari yang lain moduleyaituUsersModule

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

Sementara saya mencoba menavigasi dari komponen yang merupakan bagian dari Layoutmodul, tetapi tidak memiliki gagasan tentang modul router. Apakah itu yang menyebabkan kesalahan.

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

Saya mencoba menavigasi dari menu HeaderComponent. Saya akan dengan senang hati memberikan lebih banyak informasi jika diperlukan.

Anda perlu menambahkan RouterModuleuntuk importssetiap @NgModule()mana komponen menggunakan komponen atau direktif dari (dalam hal ini routerLinkdan <router-outlet>.

declarations: [] adalah membuat komponen, arahan, pipa, yang dikenal di dalam modul saat ini.

exports: []adalah membuat komponen, arahan, pipa, tersedia untuk mengimpor modul. Yang ditambahkan declarationshanya bersifat pribadi untuk modul.exportsmembuat mereka publik.

Lihat juga https://angular.io/api/router/RouterModule#usage-notes

Anda tidak memiliki paket paket rute, atau termasuk modul router di modul aplikasi utama Anda.

Pastikan package.json Anda memiliki ini:

"@angular/router": "^3.3.1"

Kemudian di app.module Anda mengimpor router dan mengkonfigurasi rute:

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

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

Memperbarui :

Pindahkan AppRoutingModule menjadi yang pertama di impor:

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

Saya akan menambahkan kasus lain di mana saya mendapatkan kesalahan yang sama tetapi hanya menjadi boneka. Saya telah menambahkan [routerLinkActiveOptions]="{exact: true}"tanpa menambahkan routerLinkActive="active".

Kode saya salah

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

padahal seharusnya

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

Tanpa memiliki routerLinkActive, Anda tidak bisa routerLinkActiveOptions.

Ketika tidak ada lagi yang berfungsi saat itu harus berfungsi, restart ng servis. Sangat menyedihkan menemukan bug semacam ini.

Dalam kasus saya, saya hanya perlu mengimpor komponen yang baru saya buat ke RouterModule

{path: 'newPath', component: newComponent}

Kemudian di app.moduleimport Anda router dan konfigurasikan rute:

impor {RouterModule} dari '@ angular / router';

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

Semoga ini bisa membantu seseorang !!!

Anda perlu menambahkan RouterMoudleke importsbagian modul yang berisi Headerkomponen