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


145

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.


Impor RouteModule di root aplikasi Anda, dan perbarui paket npm versi stabil terbaru
harshes53

Ya saya punya versi stabil terbaru.
Umair Sarfraz

2
Apakah Anda juga menambahkan RouterModuleke imports: []semua modul tempat Anda menggunakan routerLinkatau<router-outlet>
Günter Zöchbauer

Pemesanan modul @Umair penting dalam impor, pindah AppRoutingModulesebelumLayoutModule
harshes53

1
@ harshes53 Saya tidak berpikir itu benar.
Günter Zöchbauer

Jawaban:


259

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


@Gunter apakah boleh mengimpor RouterModule beberapa kali? Sebagai contoh jika saya ingin menggunakan routerLink di childModule, saya perlu mengimpor RouterModule ke modul anak sedangkan itu sudah diimpor oleh Modul aplikasi root ...
Olivier Boissé

Ya, itu hanya akan dimasukkan satu kali ke output build.
Günter Zöchbauer

Ok tapi saya pikir kita perlu berhati-hati untuk memanggil metode forRoothanya sekali, modul anak-anak hanya boleh mengimpor RouterModule tanpa memanggil metode forRoot
Olivier Boissé

Saya pikir itu tergantung apa forRoot. Ketika penyedia egistering dengan forRootbeberapa kali, hasilnya sama seperti jika dilakukan hanya sekali. Jika Anda melakukan hal-hal lain, ini mungkin tidak berbeda.
Günter Zöchbauer

2
Terima kasih atas jawaban ini! Dalam kasus saya aplikasi berfungsi, tetapi tes gagal. Solusinya adalah mengimpor RouterTestingModule dalam pengujian, untuk setiap komponen yang menggunakan routerLink.
Slavik Shynkarenko

24

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
  ],

Ini tidak menyelesaikan masalah. Bisakah Anda memeriksa pembaruan saya?
Umair Sarfraz

@Ben - "forRoot ()" berarti Anda memanggil metode yang didefinisikan pada modul yang diimpor yang menjalankan konfigurasi atau pengaturan untuk modul. Anda juga dapat mendefinisikan metode seperti "forChild ()" dalam modul khusus dan memanggilnya, jika Anda mau. Metode ini digunakan untuk tugas-tugas seperti mengatur penyedia layanan. Ini juga bagaimana Anda mendapatkan Layanan Singleton di Angular. Lihat angular.io/guide/singleton-services
RoboBear

10

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.


3

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


2
Dapat menyesuaikan ada bug. Saya hanya terus menghapus isi folder dist dan membangun kembali. Akhirnya berhasil. Coba tambahkan tautan ke setiap komponen di app.component.ts. Jika itu tidak berhasil, satu-satunya pilihan Anda adalah berdoa dan berpuasa.
Sam

1

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 !!!


1

Anda perlu menambahkan RouterMoudleke importsbagian modul yang berisi Headerkomponen

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.