滚动以锚定在Angular 6中

时间:2019-01-24 15:31:59

标签: angular scroll angular6 anchor

我试图在“ Angular 6”页面上创建锚点,但是当我添加配置时:

imports: [RouterModule.forRoot(routes,{'anchorScrolling': 'enabled',})],

它返回错误:

Unable to assign type '{anchorScrolling: string; scrollPositionRestoration: string; } 'to type' ExtraOptions'. An object literal can only specify known properties, and 'anchorScrolling' does not exist in the 'ExtraOptions' type.

有什么主意吗?

谢谢!

其他信息:我的文件是“ app-routing-module.ts”,其中包含有关路由的信息:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';

const routes: Routes = 
[
  { path: '', component: ComIdiomaurlComponent }
];

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

Visual Studio Code的帮助为我提供了额外的选择:

Options (see ExtraOptions):
- enableTracing makes the router log all its internal events to the console.
- useHash enables the location strategy that uses the URL fragment instead of the history API.
- initialNavigation disables the initial navigation.
- errorHandler provides a custom error handler.
- preloadingStrategy configures a preloading strategy (see PreloadAllModules).
- onSameUrlNavigation configures how the router handles navigation to the current URL.

See ExtraOptions for more details.

为什么它没有出现在其他选项中?

这是我的package.json:

{
"name": "gijon-main",
"version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/snazzy-info-window": "^1.0.0-beta.5",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@ng-select/ng-select": "^2.1.3",
    "@ngx-share/button": "^6.0.1",
    "@ngx-share/buttons": "^6.0.1",
    "@ngx-share/core": "^6.0.1",
    "angular-font-awesome": "^3.1.2",
    "angular2-cookie-law": "^6.0.4",
    "bootstrap": "^4.1.1",
    "cookieconsent": "^3.1.0",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "ng-bootstrap": "^1.6.3",
    "ng2-page-scroll": "^4.0.0-beta.12",
    "ng2-translate": "^5.0.0",
    "ngx-cookieconsent": "^2.0.0",
    "ngx-flickity": "0.0.9",
    "popper.js": "^1.14.3",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "snazzy-info-window": "^1.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "^7.0.3",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@fortawesome/fontawesome-pro": "^5.1.0",
    "@types/datatables.net": "^1.10.9",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.1",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

2 个答案:

答案 0 :(得分:0)

我认为问题出在“ Angular 6.0”上。...直到Angular 6.1都没有这种选择。

答案 1 :(得分:0)

Angular 6.1.0仅在49c5234中引入了anchorScrolling功能。

您必须更新至Angular 6.1.0才能使用此功能。

相关问题