ไม่สามารถเชื่อมโยงกับ 'routerLink' เนื่องจากไม่ใช่คุณสมบัติที่รู้จัก


156

เมื่อเร็ว ๆ นี้ฉันได้เริ่มเล่นกับ angular 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

  <a [routerLink]="['/signin']">Sign in</a>

ตอนนี้ฉันเข้าใจบางส่วนฉันเดาว่าเนื่องจากส่วนประกอบนั้นเป็นกระดาษห่อหุ้มรอบ ๆrouter-outletจึงไม่สามารถเข้าถึงได้ด้วยวิธีrouterนี้ ดังนั้นจึงมีความเป็นไปได้ที่จะเข้าถึงการนำทางจากภายนอกสำหรับสถานการณ์เช่นนี้หรือไม่?

ฉันยินดีเป็นอย่างยิ่งที่จะเพิ่มข้อมูลเพิ่มเติมหากจำเป็น ขอบคุณล่วงหน้า.

อัปเดต

1- ของฉันpackage.jsonมี@angular/router 3.3.1เวอร์ชันเสถียรอยู่แล้ว 2- ในappโมดูลหลักของฉันฉันได้นำเข้าไฟล์routing-module. โปรดดูที่ด้านล่าง.

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

เส้นทางที่ฉันพยายามเข้าถึงได้รับมอบหมายจากเส้นทางอื่นmoduleนั่นคือไฟล์UsersModule

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

ในขณะที่ฉันพยายามนำทางจากส่วนประกอบที่เป็นส่วนหนึ่งของLayoutโมดูล แต่ไม่มีความคิดเกี่ยวกับโมดูลเราเตอร์ นั่นคือสิ่งที่ทำให้เกิดข้อผิดพลาด

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. เรายินดีที่จะให้ข้อมูลเพิ่มเติมหากจำเป็น


นำเข้า RouteModule ที่รากของแอปของคุณและอัปเดตแพ็คเกจ npm เวอร์ชันเสถียรล่าสุด
harshes53

ใช่ฉันมีเวอร์ชันเสถียรล่าสุด
Umair Sarfraz

3
คุณยังไม่เพิ่มRouterModuleไปยังimports: []โมดูลทั้งหมดที่คุณใช้routerLinkหรือ<router-outlet>
GünterZöchbauer

การสั่งซื้อโมดูล @Umair เป็นสิ่งสำคัญในการนำเข้าย้ายAppRoutingModuleก่อนLayoutModule
harshes53

1
@ harshes53 ไม่คิดว่าจะจริง
GünterZöchbauer

คำตอบ:


289

คุณต้องเพิ่มRouterModuleไปยังimportsทุก@NgModule()ที่ส่วนประกอบใช้องค์ประกอบใด ๆ หรือสั่งจาก (ในกรณีนี้และrouterLink<router-outlet>

declarations: [] คือการสร้างส่วนประกอบคำสั่งท่อที่รู้จักกันภายในโมดูลปัจจุบัน

exports: []คือการสร้างส่วนประกอบคำสั่งท่อพร้อมสำหรับการนำเข้าโมดูล สิ่งที่เพิ่มเข้ามาdeclarationsเท่านั้นเป็นส่วนตัวของโมดูล exportsทำให้เป็นสาธารณะ

ดูเพิ่มเติมที่https://angular.io/api/router/RouterModule#usage-notes


@Gunter สามารถนำเข้า RouterModule หลาย ๆ ครั้งได้หรือไม่? ตัวอย่างเช่นถ้าฉันต้องการใช้ routerLink ใน childModule ฉันต้องนำเข้า RouterModule ไปยังโมดูลลูกในขณะที่โมดูลของแอปรูทนำเข้าแล้ว ...
Olivier Boissé

ใช่มันจะรวมเพียงครั้งเดียวในเอาต์พุตการสร้าง
GünterZöchbauer

โอเค แต่ฉันคิดว่าเราต้องดูแลเพื่อเรียกใช้เมธอดforRootเพียงครั้งเดียวโมดูลลูก ๆ ควรนำเข้า RouterModule โดยไม่เรียกเมธอด forRoot
Olivier Boissé

ฉันคิดว่ามันขึ้นอยู่กับสิ่งที่forRootทำ เมื่อทำการกระตุ้นผู้ให้บริการforRootหลายครั้งผลลัพธ์จะเหมือนกับว่าทำเพียงครั้งเดียว หากคุณทำสิ่งอื่นสิ่งนี้อาจไม่แตกต่างกัน
GünterZöchbauer

2
ขอบคุณสำหรับคำตอบนี้! ในกรณีของฉันแอปใช้งานได้ แต่การทดสอบล้มเหลว วิธีแก้ปัญหาคือการนำเข้า RouterTestingModule ในการทดสอบสำหรับแต่ละส่วนประกอบที่ใช้ routerLink
Slavik Shynkarenko

26

คุณไม่มีการรวมแพ็กเกจเส้นทางหรือรวมโมดูลเราเตอร์ในโมดูลแอปหลักของคุณ

ตรวจสอบให้แน่ใจว่า package.json ของคุณมีสิ่งนี้:

"@angular/router": "^3.3.1"

จากนั้นในแอปของคุณโมดูลนำเข้าเราเตอร์และกำหนดค่าเส้นทาง:

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

สิ่งนี้ไม่ได้ช่วยแก้ปัญหา คุณช่วยตรวจสอบการอัปเดตของฉันได้ไหม
Umair Sarfraz

@Ben - "forRoot ()" หมายถึงคุณกำลังเรียกใช้เมธอดที่กำหนดในโมดูลที่นำเข้าซึ่งรันการกำหนดค่าหรือการตั้งค่าสำหรับโมดูล คุณยังสามารถกำหนดวิธีการเช่น "forChild ()" ในโมดูลที่กำหนดเองและเรียกใช้หากคุณต้องการ วิธีนี้ใช้สำหรับงานต่างๆเช่นการตั้งค่าผู้ให้บริการ นอกจากนี้คุณจะได้รับบริการ Singleton ใน Angular อย่างไร ดูangular.io/guide/singleton-services
RoboBear

การทำให้ AppRoutingModule เป็นตัวแรกในการนำเข้าช่วยแก้ปัญหาได้
aRyhan

10

ฉันจะเพิ่มอีกกรณีที่ฉันได้รับข้อผิดพลาดเดียวกัน แต่เป็นเพียงแค่หุ่นจำลอง ฉันได้เพิ่มโดยไม่ต้องเพิ่มเลย[routerLinkActiveOptions]="{exact: true}"routerLinkActive="active"

รหัสไม่ถูกต้องของฉันคือ

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

เมื่อมันควรจะเป็น

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

โดยไม่ต้องคุณจะไม่สามารถมีrouterLinkActiverouterLinkActiveOptions


6

เมื่อไม่มีสิ่งใดทำงานได้เมื่อควรทำงานให้รีสตาร์ท ng serve เป็นเรื่องน่าเศร้าที่พบข้อบกพร่องแบบนี้


3
สามารถสอดรับมีจุดบกพร่อง ฉันเพียงแค่ลบเนื้อหาของโฟลเดอร์ dist และสร้างใหม่ ในที่สุดมันก็ได้ผล ลองเพิ่มลิงก์ไปยังทุกองค์ประกอบใน app.component.ts หากไม่ได้ผลทางเลือกเดียวของคุณคือการอธิษฐานและการอดอาหาร
แซม

3

คุณต้องเพิ่มRouterMoudleเข้าไปในimportsส่วนของโมดูลที่มีHeaderส่วนประกอบ


1

ในกรณีของฉันฉันต้องนำเข้าส่วนประกอบที่สร้างขึ้นใหม่ไปยังRouterModule

{path: 'newPath', component: newComponent}

จากนั้นในapp.moduleการนำเข้าเราเตอร์ของคุณและกำหนดค่าเส้นทาง:

นำเข้า {RouterModule} จาก "@ angular / router";

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

หวังว่านี่จะช่วยได้บ้าง !!!


0

ฉันกำลังทำการทดสอบสำหรับแอป Angular ของฉันและพบข้อผิดพลาดCan't bind to 'routerLink' since it isn't a known property of 'a'เช่นกัน

ฉันคิดว่าการแสดงการอ้างอิงเชิงมุมของฉันอาจเป็นประโยชน์:

    "@angular/animations": "^8.2.14",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/router": "^8.2.14",

ปัญหาอยู่ในspecไฟล์ของฉัน ฉันเปรียบเทียบกับspecไฟล์คอมโพเนนต์อื่นที่คล้ายกันและพบว่าฉันหายไปRouterTestingModuleในimportsเช่น

    TestBed.configureTestingModule({
      declarations: [
        ...
      ],
      imports: [ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
      providers: [...]
    });
  });

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.