Angular 9 无法识别的表达式路由器链接

Question

我正在构建一个 Angular 9 应用程序，但我遇到了两个问题。

1) 当我从导航栏更改路线时，我在控制台中收到关于无法识别的表达式的错误，如下所示，尽管路线更改成功。我尝试了各种方法来解决它，但到目前为止都失败了。

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

2) 我的着陆页上 h1 标记的一部分正在发生变化，我使用 data-period 和 data-type 属性实现了这一点。但是，一旦我更改了路线，当我再次返回登录页面时，h1 数据数组就会停止更改，直到我再次从刷新按钮刷新登录页面并开始正常工作。这是我的github repository，如果您想查看 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>

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

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 { }

Answer 1

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

对于第二部分，我认为它无法识别您的更改。所以你应该强制它检查是否有这样的变化：

添加到组件的导入中：

  ChangeDetectorRef from '@angular/core';

添加到您的承包商：

private changeDetector: ChangeDetectorRef

在值或某事更改后刷新。

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