0
각도 4 애플리케이션에서 기본 라우팅을 구현하고 브라우저에서 애플리케이션을로드 할 때 다음 오류가 발생합니다. 나는 approuting.module의 라우트를 정의 했으므로 Ngmodule의 라우터 모듈과 approuting.module도 참조했다. 확실하지 문제는 다음Getting 'routerLink'는 'a'의 알려진 속성이 아니기 때문에 바인딩 할 수 없습니다. 라우터 모듈을 참조하는 중 오류가 발생했습니다
Can't bind to 'routerLink' since it isn't a known property of 'a'.
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView">
<a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/[email protected]:59
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit">
<a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/[email protected]:59
는 movie.component.html에서 내 응용 프로그램 검도 그리드의
조각의 소스 코드
</kendo-grid-column>
<kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell">
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="View" [hidden]="!dataItem.isVisibleView">
<a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" aria-hidden="true"></i></a>
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column title="Edit" headerClass="kendoGridHeader" class="kendoGridControlCell">
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Edit" [hidden]="!dataItem.isVisibleEdit">
<a [routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a>
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column title="Delete" headerClass="kendoGridHeader" class="kendoGridControlCell">
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Delete" [hidden]="!dataItem.isVisibleDelete">
<a data-toggle="dropdown" class="dropdown-toggle" href="">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu table-popup-delete">
<li>Are you sure you want to delete this?</li>
<br>
<li><button class="button" (click)="deleteWorkflow(dataItem.movieId)" style="width:100%;">Delete</button></li>
<br>
<li><button class="button" style="width:100%;">Cancel</button></li>
</ul>
</span>
</ng-template>
</kendo-grid-column>
approuting.module 것입니다. ts
import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent} from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';
import {ViewmovieComponent} from './movie/view/viewmovie.component';
export const routes: Routes = [
{path : '', component : HomeComponent},
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit' , component : EditmovieComponent },
{path : 'view' , component : ViewmovieComponent },
{path: '**',component : NotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes,{useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule{}
,210
app.module는
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './approuting.module';
import {HomeModule} from './home/home.module';
import {MovieModule} from './movie/movie.module';
import { MRDBCommonService } from './shared/services/mrdb.common.service';
import { NotFoundComponent } from './not-found/not-found.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent,
FooterbarComponent,
TopbarComponent,
NavbarComponent,
NotFoundComponent
],
imports: [
AppRoutingModule,
HomeModule,
MovieModule,
BrowserModule,
HttpModule,
SharedModule
],
providers: [MRDBGlobalConstants,
MRDBCommonService],
bootstrap: [AppComponent]
})
export class AppModule { }
'BrowserModule'을 가져 오기 최상위로 옮깁니다. 또는 최소한 AppRoutingModule 위. –
그게 도움이 안된다 – Tom
코드가 제대로 보이는지, 모든 것이 실제로 컴파일되었는지 확인하십시오. 모든'ng serve' 또는'ng build -w'와'rd/s/q node_modules' (또는'rm -rf node_modules') 리눅스의 경우), 그리고 나서'npm i'를보고 –