無法綁定到“routerlink”，因為它不是“a”的已知屬性（Angular 11 + asp.net core5 + adminlte3）

Question

我正在使用 adminlte3、angular、asp.net core5 編寫 web 應用程序並收到錯誤消息，但最近幾天無法解決此問題。 錯誤消息是“無法綁定到'routerlink'，因為它不是'a'的已知屬性。~~”我一直在研究這個問題並遵循答案，但所有這些答案都不起作用

這是布局：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { DashV1Component } from './dashboard_v1/dashboard_v1.component';
import { CitiesComponent } from './cities/cities.component';
@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    CitiesComponent,
    DashV1Component
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: DashV1Component, pathMatch: 'full' },
      { path: 'cities', component: CitiesComponent}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.Component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  
}

城市.Component.ts

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { City } from './city';
@Component({
  selector: 'app-cities',
  templateUrl: './cities.component.html',
  styleUrls: ['./cities.component.css']
})
export class CitiesComponent {
  public cities: City[];
  constructor(
    private http: HttpClient,
    @Inject('BASE_URL') private baseUrl: string) {
  }
  ngOnInit() {
    this.http.get<City[]>(this.baseUrl + 'api/Cities')
      .subscribe(result => {
        this.cities = result;
      }, error => console.error(error));
  }
}

導航菜單.component.html

<ul class="nav-treeview">
            <li class="nav-item">
              <a class="nav-link" [routerlink]="['/cities']">Cities_R</a>
            </li>  ~~~~~  

導航菜單.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
}

下面是錯誤信息

:44314/vendor.js:13096 Uncaught Error: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("    <ul class="nav-treeview">
            <li class="nav-item">
              <a class="nav-link" [ERROR ->][routerlink]="['/cities']">Cities_R</a>
            </li>
            <li class="nav-item">
"): ng:///AppModule/NavMenuComponent.html@449:34
    at syntaxError (:44314/vendor.js:13096)
    at TemplateParser.parse (:44314/vendor.js:22309)
    at JitCompiler._parseTemplate (:44314/vendor.js:36882)
    at JitCompiler._compileTemplate (:44314/vendor.js:36870)
    at :44314/vendor.js:36814
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (:44314/vendor.js:36814)
    at :44314/vendor.js:36727
    at Object.then (:44314/vendor.js:13087)
    at JitCompiler._compileModuleAndComponents (:44314/vendor.js:36726)

package.json

"private": true,
  "dependencies": {
    "@angular/animations": "8.2.12",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/forms": "8.2.12",
    "@angular/platform-browser": "8.2.12",
    "@angular/platform-browser-dynamic": "8.2.12",
    "@angular/platform-server": "8.2.12",
    "@angular/router": "8.2.12",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^3.3.3",
    "jquery": "3.4.1",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "^8.3.26",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.12",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "3.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }

Answer 1

它應該是：

<a class="nav-link" [routerLink]="['/cities']">Cities_R</a>

您的代碼顯示 routerlink不正確。