Question

在html页面中使用 [routerlink] 时，我遇到了模板解析错误，而我导入了RouterModule。请查看以下HTML：

<mat-toolbar color="primary">
  <h3 [style.color]="white">ADMIN PORTAL</h3>
  <span class="spacer-left"></span>
  <button mat-button *ngIf="islogged"> View Book Lists </button>
  <a mat-button *ngIf="islogged" [routerlink]="['/addNewBook']"> Add a Book </a>
  <button mat-button *ngIf="islogged" (click)="logout()"> Logout </button>
</mat-toolbar>

请注意，我正在使用棱角材质设计。

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import 'hammerjs';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { LoginService } from './services/login.service';
import { AddNewBookComponent } from './components/add-new-book/add-new-book.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    AddNewBookComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    routing,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule,
  ],
  providers: [LoginService],
  bootstrap: [AppComponent]
})
export class AppModule { }

请注意，我是通过 routing 变量隐式导入RouterModule的，该变量在以下分隔的TypeScript文件中导出：

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../app/components/login/login.component';
import { AddNewBookComponent } from '../app/components/add-new-book/add-new-book.component';

const appRoutes: Routes = [{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }, {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'addNewBook',
    component: AddNewBookComponent
  }
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

即使我在上述文件中导入了RouterModule，我仍然会在浏览器中遇到如下详细错误：

Uncaught Error: Template parse errors: Can't bind to 'routerlink'
since it isn't a known property of 'a'. (">   <button mat-button
*ngIf="islogged"> View Book Lists </button>   <a mat-button *ngIf="islogged" [ERROR ->][routerlink]="['/addNewBook']"> Add a Book </a>   <button mat-button *ngIf="islogged" (click)="logout"):
ng:///AppModule/NavbarComponent.html@4:33
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
(compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate
(compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate
(compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents
(compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
(compiler.js:23857) syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
@ compiler.js:14830
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate
@ compiler.js:24018
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate
@ compiler.js:24005 (anonymous) @ compiler.js:23948
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents
@ compiler.js:23948 (anonymous) @ compiler.js:23858 then @
compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
@ compiler.js:23857
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync
@ compiler.js:23817
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync
@ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
@ core.js:4352 ./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78 0 @ main.ts:12
__webpack_require__ @ bootstrap:78 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1

我急于寻求帮助。预先感谢您的答复。

Answer 1

在app.module.ts中没有看到您已导入RouterModule的任何地方。您需要导入RouterModule。

编辑

您需要按照以下步骤将路由放入模块中

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { };

并将 AppRoutingModule 导入 app.module.ts

Answer 2

正确的方法是创建一个模块

...
import { Routes, RouterModule } from '@angular/router';
...

const appRoutes: Routes = [...]

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

然后将AppRoutingModule添加到imports的{{1}}数组中：

AppModule

现在，由于您已经从... import {AppRoutingModule} from './app.routing'; ... @NgModule({ ... imports: [ ... AppRoutingModule ], ... }) export class AppModule {}导出了RouterModule，因此您将可以访问AppRoutingModule中的RouterModule导出的所有内容

另一件事是它不是AppModule，而是routerlink（在驼峰案例中）

Answer 3

您应该使用大写的“ L”而不是“ routerlink”来写routerLink

此外，您还应按照显示的SiddAjmera分隔app.routing文件。

Answer 4

锚标签仅需要属性绑定，而无需方括号。

导航路径是固定的，因此您可以为routerLink分配一个字符串（“一次性”绑定）。

Router docs

尽管在app.module中声明了RouterModule

4 个答案: