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>

app.routing.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 {}

滚动-nav.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属性值（双引号内）中提供角度表达式，因此'contact'。如果你只设置属性名称（没有绑定，那么只有routerLink=""形式），引号内的任何内容都被视为字符串。

未捕获错误：语法错误，无法识别的表达式：/ contact - ANGULAR 2 - 路由时无法实现平滑滚动效果

1 个答案: