Javascript Angular 9无法识别的表达式routerlink

我正在构建一个Angular 9应用程序，其中我面临两个问题

1） 当我从导航栏更改路由时，我在控制台中遇到一个关于无法识别的表达式的错误，如下所示，尽管路由正在成功更改。我试过各种方法来解决这个问题，但到目前为止都失败了

语法错误，无法识别的表达式：/about

2） 我的登录页上的h1标记的一部分正在更改，这是我使用数据周期和数据类型属性实现的。但是，一旦我更改了路由，当我再次返回到登录页时，h1数据数组停止更改，直到我再次从刷新按钮刷新登录页，它开始正常工作。这是我的箱子，你要检查一下 navbar.html：

<nav class="navbar navbar-expand-lg navbar-light bg-light header-sticky">
    <div class="container">
        <a class="navbar-brand" routerLink="/"><span>E</span>xample</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a routerLink="/home" class="nav-link">Home</a></li>
                <li class="nav-item"><a [routerLink]="['/about']" class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a [routerLink]="['/services']" class="nav-link" href="#services">Services</a></li>
                <li class="nav-item"><a [routerLink]="['/contact']" class="nav-link" href="#contact">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
            </ul>
        </div>
    </div>
</nav>

登录页HTML:

<div class="main-banner item-bg-one" id="home">
    <div class="creative-banner-three"></div>
    <div id="particles-js"></div>
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="main-banner-text">
                    <h4>Create a <span>Buzz</span></h4>
                    <h1>Promote Your
                    <!-- Problem is over here -->
                        <a href="" class="typewrite" data-period="2000" data-type='[ "Business.", "Branding.", "Social Media." ]'>
                        <span class="wrap"></span>
                        </a>
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <a href="#welcome" class="btn btn-primary">Book a free session</a>
                    <a href="#work" class="btn btn-primary view-work">View Pricing</a>
                </div>
            </div>
        </div>
    </div>
</div>

ClientModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { ClientRoutingModule } from './client-routing.module';
import { ContactComponent } from '../contact/contact.component';
import { HomeComponent } from '../home/home.component';
import { ServicesComponent } from '../services/services.component';
import { AboutPageComponent } from '../about-page/about-page.component';

const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'home', component: HomeComponent},
{path: 'services', component: ServicesComponent},
  {path: 'about', component: AboutPageComponent},
  {path: 'contact', component: ContactComponent}
];

@NgModule({
  declarations: [
    HomeComponent,
    AboutPageComponent,
    ServicesComponent,
    ContactComponent
  ],
  imports: [
RouterModule.forChild(routes),
    CommonModule,
    ClientRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
exports: [RouterModule]
})
export class ClientModule { }

---

对于第一部分，您应该删除

href=“#about”

，因为我们不应该同时使用

href

和

routerLink

。通常Href用于外部链接

对于第二部分，我认为它没有认识到你的变化。因此，您应该通过以下方式强制它检查是否存在类似的更改：

添加到组件的导入中：

  ChangeDetectorRef from '@angular/core';

添加到您的Constractor中：

private changeDetector: ChangeDetectorRef

值或某些内容更改后刷新

  // now notify angular to check for updates
  this.changeDetector.detectChanges();

---

对于第一部分，您应该删除

href=“#about”

，因为我们不应该同时使用

href

和

routerLink

。通常Href用于外部链接

对于第二部分，我认为它没有认识到你的变化。因此，您应该通过以下方式强制它检查是否存在类似的更改：

添加到组件的导入中：

  ChangeDetectorRef from '@angular/core';

添加到您的Constractor中：

private changeDetector: ChangeDetectorRef

值或某些内容更改后刷新

  // now notify angular to check for updates
  this.changeDetector.detectChanges();

---

为什么将routerLink绑定到数组？不，我没有。我用两种方式声明了routerLink，即routerLink=“/home”和[routerLink]=“['/home']”，但它们都返回相同的错误。看，使用angular自己的路由器，而不是其他方法。转到app-routing.module.ts，只需在那里页面路由并导入组件，然后你就可以在任何地方使用它[我重复：不要进入app.module.ts]你能在这里发布你的主路由文件吗？@CodeMind done..现在检查一下你为什么将routerLink绑定到数组？不，我没有..我已经用两种方式声明了routerLink，分别是routerLink=“/home”和[routerLink]=“['/home']”但两者都返回相同的错误。看，使用angular自己的路由器，而不是其他方法。转到app-routing.module.ts，只需在那里页面路由并导入组件，然后您就可以在任何地方使用它[我重复：不要进入app.module.ts]你能在这里发布你的主路由文件吗？@CodeMind done..check now我删除了href标记，但仍然得到相同的错误。添加ChangeDetectorRef后，我现在得到另一个错误作为断言错误：应该在更新模式下运行[Expected=>false==true在删除Href后应该可以正常工作！您确定所有的Href都已删除吗？--第二部分我认为有丢失的位置代码检查此链接：现在我的导航栏中的链接如下所示

主页

但仍然收到相同的错误。请查看我的存储我删除了href标记但仍然收到相同的错误。添加ChangeDetectorRef后，我现在收到另一个错误作为断言错误：应在更新模式下运行[Expected=>false==true在删除Href后应该可以正常工作！你确定所有的Href都被删除了吗？--第二部分，我认为有丢失的位置代码检查此链接：现在我的导航栏中的链接类似于此

Home

，但仍然会出现相同的错误。请查看我的存储库