'routerLink'는 알려진 속성이 아니므로 바인딩할 수 없습니다.

'routerLink'는 알려진 속성이 아니므로 바인딩할 수 없습니다.

를를 、 2 、 를를 、 를를를2 。아직까지는 대박이다.그래서, 저는 Demo Personal Project를 시작했습니다.angular-cli.

몇 하고 , 에 이 루트로 네비게이트 할 수 .router-outlet을 사용하다

app.component.module

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

header.component.displaces

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

어느 정도 이해했습니다.그 컴포넌트는 겉돌고 있기 때문에router-outlet할 수 .router그럼 이런 경우 외부에서 내비게이션에 접속할 수 있을까요?

필요하다면 기꺼이 더 많은 정보를 추가하겠습니다.잘 부탁드립니다.

갱신하다

- 마이1 - 마이1 - 마이1package.json 안정되어 있다@angular/router 3.3.1. 2 - 전 -2 - 인 version version version versionapp Import하다를 .routing-module아래를 참조해 주세요.

app.disc.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-buff.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이 바로 그그 that이다.UsersModule

user-displays.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{}

는 지금 서 the the the the the the the the the the the에서 .HeaderComponent필요하다면 기꺼이 더 많은 정보를 제공하겠습니다.

때 더해야 요.RouterModule로로 합니다.imports@NgModule()서 컴포넌트는 의 컴포넌트 이 경우는, 「이러한 명령어」).routerLink ★★★★★★★★★★★★★★★★★」<router-outlet>.

import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]

declarations: []구성 요소, 지침, 파이프를 현재 모듈 내부에 알리는 것입니다.

exports: []모듈을 Import할 때 컴포넌트, 지시어, 파이프를 사용할 수 있도록 하는 것입니다. declarations모듈 전용입니다. exports공개하는 거죠

https://angular.io/api/router/RouterModule#usage-notes 도 참조해 주세요.

루트 패키지가 포함되어 있지 않거나 메인 앱모듈에 라우터 모듈이 포함되어 있지 않습니다.

소포를 확인하세요.json에는 다음이 있습니다.

"@angular/router": "^3.3.1"

다음으로 app.module에서 라우터를 Import하여 루트를 설정합니다.

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

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

업데이트:

AppRoutingModule을 Import의 선두로 이동합니다.

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

같은 에러가 났지만 그냥 바보가 된 사례를 하나 더 추가하겠습니다.나는 덧붙였다.[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>

있지 않다routerLinkActive, 당신은 가질 수 없습니다.routerLinkActiveOptions.

다른 아무것도 동작하지 않는 경우는, ng serve 를 재기동합니다.이런 종류의 벌레를 발견하는 것은 슬프다.

app-routing.module에서 RouterModule을 내보내고 루트 모듈(앱 모듈)에서 app-routingModule을 Import했는데도 이 오류가 발생하고 있습니다.

그리고 라우팅 모듈에만 컴포넌트를 Import한 것을 확인했습니다.

루트 모듈(앱 모듈)에서 컴포넌트를 선언하면 문제가 해결됩니다.

declarations: [
AppComponent,
NavBarComponent,
HomeComponent,
LoginComponent],

메인 module.ts 파일에 RouterModule을 Import해야 합니다.

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


@NgModule({
  imports: [RouterModule],
 )}

추가만 하면 됩니다.RouterModule다음과 같습니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarItemComponent } from './sidebar-item/sidebar-item.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    SidebarItemComponent
  ],

  imports: [
    CommonModule,
    RouterModule,
  ], 
})
export class LayoutModule { }

를 추가해야 합니다.RouterMoudle안으로imports를 포함하는 모듈의 섹션Header요소

이 문제는 모듈을 Import하지 않았기 때문입니다.

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

그리고 Import 섹션에서 이 모듈을 선언해야 합니다.

   imports:[RouterModule]

Angular 앱에 대한 테스트를 실행 중 오류가 발생했습니다.Can't bind to 'routerLink' since it isn't a known property of 'a'뿐만 아니라.

Angular 종속성을 보여 주는 것이 유용할 것 같아서요.

    "@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: [...]
    });
  });

이 경우 새로 작성한 컴포넌트를 Router Module로 Import하기만 하면 됩니다.

{path: 'newPath', component: newComponent}

그럼 네 안에app.module라우터를 Import하여 루트를 설정합니다.

{ Router Module }을(를) '@angular/router'에서 Import합니다.

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

누군가에게 도움이 되길 바랍니다!!!

나는 완전히 다른 방법을 택했다.

app.component.ts

import { Router } from '@angular/router';
export class AppComponent {

   constructor(
        private router: Router,
    ) {}

    routerComment() {
        this.router.navigateByUrl('/marketing/social/comment');
    }
}

app.component.module

<button (click)="routerComment()">Router Link </button>

현재 컴포넌트의 모듈에서 RouterModule을 Import합니다.

예를 들면:-

import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]

...

도움이 됐어요.

학생의 예에서 비슷한 문제를 발견했습니다.2시간 동안 여기에 제시된 모든 내용 및 몇 가지 유사한 토픽을 체크한 결과 오류가 routerLink가 아닌 routerlink임을 알 수 있었습니다.

이런 '한 글자 오타'를 발견하기는 쉬워 보이지만, 처음 보는 곳에서는 그렇지 않습니다.

이거 때문에 2시간이나 걸렸어요Visual Studio의 버그였어요.Angular를 다시 설치하고 NPM을 다시 업데이트해야 했는데 다시 작동합니다.

컴포넌트 모듈에 Router Module을 추가합니다.

오래된 질문입니다만, 이것은 OP의 문제는 아닌 것 같습니다만, 같은 「라우터 링크에 바인드 할 수 없습니다」를 검색했을 때, 이것은 알려진 속성이 아니기 때문에 여기에 오게 되었습니다." 메시지입니다.다른 사람도 그렇게 할 경우를 대비해서 제 문제가 된 걸 공유하려고요

AppRoutingModule에 RouterModule이 포함되어 있고 루트가 모두 올바르게 설정되어 있는 것을 확인한 결과, 다음과 같은 매우 미묘한 문제가 발견되었습니다. " " " " " " "[routerLink]"[routerlink]'l'자, 'l'자, 'l'자, 'l'자, 'l'자, 'l'자'자,

우습게도 네 뇌가 가끔 네 얼굴을 쳐다보는 걸 간과할 수 있다니

언급URL : https://stackoverflow.com/questions/42035387/cant-bind-to-routerlink-since-it-isnt-a-known-property