升级后 RouterLink 的控制台错误 Bootstrap

Question

所以我采用了原来的Angular导航模板：

<div class='main-nav'>
<div class='navbar navbar-inverse'>
    <div class='navbar-header'>
        <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
            <span class='sr-only'>Toggle navigation</span>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
        </button>
        <a class='navbar-brand' [routerLink]='["/"]'>JobWeb</a>
    </div>
    <div class='clearfix'></div>
    <div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
        <ul class='nav navbar-nav'>
            <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                <a [routerLink]='["/"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-home'></span> Home
                </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
                <a [routerLink]='["/counter"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-education'></span> Counter
                </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
                <a [routerLink]='["/fetch-data"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Fetch data
                </a>
            </li>
        </ul>
    </div>
</div>

并且我将 Bootstrap 从 3.3.7 升级到 4.1.3，如下所示：

    <div class="main-nav">
  <div class="navbar navbar-dark bg-dark navbar-expand-md">
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"
            [attr.aria-expanded]="isExpanded" (click)="toggle()">
      <span class="sr-only">Toggle navigation</span>
    </button>
    <a class="navbar-brand" [routerlink]="['/']">JobWeb</a>
    <div class="clearfix"></div>
    <div class="navbar-collapse collapse" [ngclass]="{ 'in': isExpanded }">
      <ul class="nav navbar-nav">
        <li [routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{ exact: true }"
            class="nav-item">
          <a [routerlink]="['/']" (click)="collapse()" class="nav-link">
            <span class="glyphicon glyphicon-home"></span> Home
          </a>
        </li>
        <li [routerlinkactive]="['link-active']" class="nav-item">
          <a [routerlink]="['/counter']" (click)="collapse()" class="nav-link">
            <span class="glyphicon glyphicon-education"></span> Counter
          </a>
        </li>
        <li [routerlinkactive]="['link-active']" class="nav-item">
          <a [routerlink]="['/fetch-data']" (click)="collapse()" class="nav-link">
            <span class="glyphicon glyphicon-th-list"></span> Fetch data
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Bootstrap 部分似乎没问题，因为如果我转到另一个带有按钮的简单页面，该按钮会以新样式显示。但我最终收到一个控制台错误，上面写着：

    Uncaught Error: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
      <span class="sr-only">Toggle navigation</span>
    </button>
    <a class="navbar-brand" [ERROR ->][routerlink]="['/']">JobWeb</a>
    <div class="clearfix"></div>
    <div class="navbar-collapse co"): ng:///AppModule/NavMenuComponent.html@6:28
Can't bind to 'ngclass' since it isn't a known property of 'div'. ("nk]="['/']">JobWeb</a>
    <div class="clearfix"></div>
    <div class="navbar-collapse collapse" [ERROR ->][ngclass]="{ 'in': isExpanded }">
      <ul class="nav navbar-nav">
        <li [routerlinkactive]="): ng:///AppModule/NavMenuComponent.html@8:42
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("ollapse collapse" [ngclass]="{ 'in': isExpanded }">
      <ul class="nav navbar-nav">
        <li [ERROR ->][routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{ exact: true }"
            class=""): ng:///AppModule/NavMenuComponent.html@10:12
Can't bind to 'routerlinkactiveoptions' since it isn't a known property of 'li'. ("isExpanded }">
      <ul class="nav navbar-nav">
        <li [routerlinkactive]="['link-active']" [ERROR ->][routerlinkactiveoptions]="{ exact: true }"
            class="nav-item">
          <a [routerlink]"): ng:///AppModule/NavMenuComponent.html@10:49
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("-active']" [routerlinkactiveoptions]="{ exact: true }"
            class="nav-item">
          <a [ERROR ->][routerlink]="['/']" (click)="collapse()" class="nav-link">
            <span class="glyphicon glyph"): ng:///AppModule/NavMenuComponent.html@12:13
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("
          </a>
        </li>
        <li [ERROR ->][routerlinkactive]="['link-active']" class="nav-item">
          <a [routerlink]="['/counter']" (cli"): ng:///AppModule/NavMenuComponent.html@16:12
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
        </li>
        <li [routerlinkactive]="['link-active']" class="nav-item">
          <a [ERROR ->][routerlink]="['/counter']" (click)="collapse()" class="nav-link">
            <span class="glyphico"): ng:///AppModule/NavMenuComponent.html@17:13
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("
          </a>
        </li>
        <li [ERROR ->][routerlinkactive]="['link-active']" class="nav-item">
          <a [routerlink]="['/fetch-data']" ("): ng:///AppModule/NavMenuComponent.html@21:12
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
        </li>
        <li [routerlinkactive]="['link-active']" class="nav-item">
          <a [ERROR ->][routerlink]="['/fetch-data']" (click)="collapse()" class="nav-link">
            <span class="glyph"): ng:///AppModule/NavMenuComponent.html@22:13
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

我使用在线转换器从 Bootstrap 3 转换为 4 (http://upgrade-bootstrap.bootply.com/)，所以我认为不知何故把事情搞砸了，但对于我来说，我似乎无法做到弄清楚它是什么。

我希望有人能看到我遗漏的明显错误。谢谢。

Answer 1

是的，这是由于您从您提供的升级 bootstrap link 中获得的转换。根据您使用的原始 angular 模板，关于 routerLink 的大小写都是正确的，但是在您转换之后，它们都是小写形式 路由器link

把你所有的[routerlink]换成[routerLink]大写字母L

这些是正确的：

[routerLink]
[routerLinkActive]
[routerLinkActiveOptions]

你的是：

[routerlink]
[routerlinkactive]
[routerlinkactiveoptions]

Angular 区分大小写，所以要小心 :)

升级后 RouterLink 的控制台错误 Bootstrap

Console Error for RouterLink After Upgrading Bootstrap

navbar

bootstrap-4

routerlink

angular