Angular 9 未识别的表达式 routerlink

Question

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

1）当我从导航栏中更改路由时，我在控制台中得到了一个关于未识别表达式的错误，就像下面一样，尽管路由更改成功。我已经尝试了各种方法来解决这个问题，但到目前为止都失败了。

语法错误，未识别的表达式：about----------------------。

2) 我的着陆页上的h1标签的一部分正在改变，我已经使用data-period和data-type属性实现了。但是一旦我改变了路由，当我再次回到登陆页面时，h1数据数组就会停止变化，直到我再次从刷新按钮刷新登陆页面，它才开始正常工作。以下是我的 github仓库 以防你想检查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>

Module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ClientRoutingModule } from './client-routing.module';
import { BlogHomeComponent } from '../blog-home/blog-home.component';
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: 'blogs', component: BlogHomeComponent},
  {path: 'services', component: ServicesComponent},
  {path: 'about', component: AboutPageComponent},
  {path: 'contact', component: ContactComponent}
];

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

登陆页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>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { ToastrModule } from 'ng6-toastr-notifications';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { FooterComponent } from './shared/footer/footer.component';
import { PreloaderComponent } from './shared/preloader/preloader.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ClientModule } from './client/client-routing/client.module';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [{path: '**', component: PageNotFoundComponent}];
@NgModule({
    declarations: [
        AppComponent,
        PreloaderComponent,
        NavbarComponent,
        FooterComponent,
        PageNotFoundComponent],
    imports: [RouterModule.forRoot(routes),
        ClientModule,
        HttpClientModule,
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        ToastrModule.forRoot()],
     providers: [],
    bootstrap: [AppComponent],
    exports: [RouterModule]
})
export class AppModule{ }

客户端模块.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 { }

Answer 1

对于第一部分，你应该删除 href="#about" 因为我们不应该使用 href 和 routerLink 一起。通常Href是用于外部链接的。

对于第二部分，我认为是angular它没有识别你的变化，所以你应该强制它检查是否有这样的变化。所以你应该通过.NET来强制它检查是否有这样的变化。

添加到你的组件的导入中。

  ChangeDetectorRef from '@angular/core';

添加到你的约束器。

private changeDetector: ChangeDetectorRef

刷新后，一个值或东西的变化。

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