无法绑定到“routerLink”,因为它不是“a”的已知属性。尽管引用了路由器模块,但仍然出错
Posted
技术标签:
【中文标题】无法绑定到“routerLink”,因为它不是“a”的已知属性。尽管引用了路由器模块,但仍然出错【英文标题】:Getting Can't bind to 'routerLink' since it isn't a known property of 'a'. error in spite of referencing router moudule 【发布时间】:2018-04-20 12:07:43 【问题描述】:我在 Angular 4 应用程序中实现基本路由,在浏览器上加载应用程序时出现以下错误。我已经在 approuting.module 中定义了路由,同时也引用了 Ngmodule 中的路由器模块以及 approuting.module。不知道是什么问题
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/MovieComponent.html@85: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/MovieComponent.html@92:59
以下是我的应用程序的源代码
movie.component.html中剑道网格的sn-p
</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
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
。
那没有帮助
您的代码看起来正确,确保所有内容都正确编译,我将停止所有ng serve
或ng build -w
和rd /s /q node_modules
(或rm -rf node_modules
,如果在Linux 上),然后@987654331 @看看
完全按照您的建议进行了尝试,但仍然出现同样的问题。看起来链接没有正确建立
如果我只评论锚标签,请注意页面加载
【参考方案1】:
我已经设法解决了这个问题。我必须将路由器模块添加到电影模块的导入中,因为电影模块中引用了路由器链接
【讨论】:
【参考方案2】:导入路由器模块
从'@angular/router'导入RouterModule;
import NgModule from '@angular/core';
import RouterModule from '@angular/router';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import LayoutComponent from './layout/layout.component';
@NgModule(
imports: [
RouterModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [
LayoutComponent
],
exports: [
FormsModule,
ReactiveFormsModule,
],
entryComponents: []
)
export class SharedModule
【讨论】:
只需要导入和你类似的RouterModule即可。 :)【参考方案3】:只是添加我的情况略有不同。也许它可以帮助别人。
正如大家在我发现的所有帖子中解释的那样......
AppRoutingModule:
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
其他路由模块:
imports: [RouterModule.forChildren(routes)],
exports: [RouterModule]
Home 模块有一个带有 routerLink 的模板:
<a [routerLink]="'asdf'">asdf</a>
以下是发生错误的情况。请注意,应用正在延迟加载其他模块:
const routes: Routes = [
path: 'home',
loadChildren: () => import('./pages/home/home-routing.module')
.then(m => m.HomeRoutingModule) //**wrong!**
]
这是解决的情况,因为我导入了错误的模块:
应用正在延迟加载其他模块:
const routes: Routes = [
path: 'home',
loadChildren: () => import('./pages/home/home.module')
.then(m => m.HomeModule)
]
【讨论】:
以上是关于无法绑定到“routerLink”,因为它不是“a”的已知属性。尽管引用了路由器模块,但仍然出错的主要内容,如果未能解决你的问题,请参考以下文章
无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]
如何解决错误 NG8002:无法绑定到“routerLink”,因为它不是“a”的已知属性。?
无法绑定到“routerLink”,因为它不是“a”的已知属性。尽管引用了路由器模块,但仍然出错
无法绑定到“routerLink”,因为即使在导入 RouterModule 之后它也不是已知属性