javascript - 未捕获错误 : Syntax error, 无法识别的表达式:/contact - ANGULAR 2 - 路由时无法实现平滑滚动效果

Question

我不明白这个问题。

有人能告诉我这个错误的含义吗？

app.compo.html

<div class="header-w3layouts"> 
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">My_Design</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <h1><a class="navbar-brand" href="index.html">My Design</a></h1>
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right cl-effect-15">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
        <li><a class="page-scroll scroll" [routerLink]="['/']" >Home</a></li>
        <li><a class="page-scroll scroll" [routerLink]="['/contact']">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>      
<main>
  <router-outlet ></router-outlet>
</main>

应用程序路由.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { home }      from './home/home.component';
import { contact }   from './contact/contact.component';
import {AppComponent } from './app.component'
import { ModuleWithProviders } from '@angular/core';

const routes: Routes = [
  { path: '', redirectTo:'/home' ,pathMatch: 'full'},    
  { path:'home', component:home },
  { path: 'contact', component: contact,  pathMatch: 'full' },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

滚动导航.js

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});

如果我启动调试器，它会突出显示 scrolling-nav.js

中的以下行

scrollTop: $($anchor.attr('href')).offset().top

为什么会这样，如何克服？

Answer 1

简单地改变这个:

<li><a class="page-scroll scroll" [routerLink]="['/contact']">Contact</a></li>

进入这个:

<li><a class="page-scroll scroll" [routerLink]="'/contact'">Contact</a></li>

或者甚至可能只是这样:

<li><a class="page-scroll scroll" routerLink="/contact">Contact</a></li>

我敢打赌即使这样也行得通:

<li><a class="page-scroll scroll" routerLink="contact">Contact</a></li>

你的 routerLink如果您没有要传递或计算的复杂参数，指令也接受字符串输入。当您使用 [routerLink]="" 表单时，您需要在 html 属性值(双引号内)内提供 Angular 表达式，因此 'contact'。如果您只设置属性名称(没有绑定(bind)，所以只是 routerLink="" 形式)，引号内的任何内容都被视为字符串。