路由问题 - 哈希标签 - Angular 2

Question

我正在尝试将普通引导模板转换为角度网站。我在从一个页面导航到另一个页面时遇到路由问题，例如About 到Contact，反之亦然。

模板已经有以下格式，在hashtag #的帮助下使用了一些css来平滑滚动。

我的 app.compo.html

之前：<li><a href="#header">About</a></li>

之后：<li><a routerLink="/about" routerLinkActive="active" href="#header">About</a></li>

<a href="#header" id="btp" class="back-to-top btn-floating waves-effect waves-light btn-large custom-btn">
    <i class="ion-ios-arrow-up"></i>
</a>

app.routing.ts

const routes: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: about, data: { state: 'about'} },
  { path: 'contact', component: contact, data: { state: 'contact'} },
];
export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});

点击 npm start 后，它在我的控制台中显示如下

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-04-05T05:55:06.359Z
Hash: 0bace8e39ad063fd5145
Time: 3614ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 46 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in Cannot read property 'length' of undefined

webpack: Failed to compile.

这是我第一次尝试使用 angular 2。我无法理解官方文档和其他相关主题的问题。

请指导我正确的方式。如果可能，请分享一些 plunker 或 stackblitz 示例

Answer 1

这可以在不使用href hash (#) 功能的情况下完成..

这是一个工作示例..

https://stackblitz.com/edit/angular-hxzu3s?embed=1&file=app/app.module.ts&view=preview

---

另一种方法是使用hash #

这是另一个工作示例..

https://stackblitz.com/edit/angular-ji6grr?embed=1&file=app/app.component.html&view=preview

Answer 2

您可以尝试删除 href="#header"，因为它只需要 routerLink 属性。 并且需要在要加载该组件的位置添加 router-outLet。