Angular 2 - bootstrap nav的问题< li>< a href ="＃header">< / a>< / li>在路由设置中

问题描述

我正在尝试将正常的引导页面转换为Angular 2中的组件。实际上在构建导航时遇到了问题。
最初标签< li>< a href>< / a>< / li> 如下所示

am trying to converting normal bootstrap page into components in Angular 2. am actually facing issues when constructing navigation.initially the tags <li><a href></a></li> is like below

 <div id="header" class="shadow">
        <!-- Navigation -->
    <nav>
            <div class="nav nav-wrapper navbar-fixed-top">
                <div class="container-fluid">

                    <!-- Menu Option -->
                    <ul class="nav-justified hide-on-med-and-down">
                        <li><a href="#header">About</a></li>
                        <li><a href="#prodcutInfo">Prod.Info</a></li>

                    <div id="side-nav">
                        <div id="nav-header">
                            <div id="nav-profile" class="center-block">

                                <!-- Profile Picture [Square] -->
                                <img src="images/profile-pic.png">
                            </div>
                            <h6 class="text-center text-capitalize">John Robert Smith</h6>
                        </div>

                        <div id="nav-link-wrapper">

                            <!-- Side Menu Option -->
                            <ul>
                                <li><a class="nav-link" href="#header">About</a></li>
                                <li><a class="nav-link" href="#prodcutInfo">Prod.Info<</a></li>
                            </ul>
                        </div>

                    </div>
                    <!-- ./Side Nav -->
                    <!-- Side Nav Mask -->
                    <div id="side-nav-mask"></div>

                </div>
            </div>
        </nav>
    </div>

有人可以告诉如何将正常的 a href 标签转换为角度路线。

could someone tell how to convert that normal a href tag into angular route.

app.routing.ts

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ProdComponent } from './prod/prod.component';

const appRoutes: Routes = [

  { path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: AboutComponent , data: { state: 'about'} },
  { path: 'prod', component: ProdComponent , data: { state: 'prod'} },
];

export const AppRouting = RouterModule.forRoot(appRoutes, {
  useHash: true
});

问题：

当我改变时在

<li><a class="nav-link" [routerLink]="['/']">About</a></li>
<li><a class="nav-link" [routerLink]="['/prodcutInfo']">Prod.Info<</a></li>

它给我如下

Uncaught Error: Syntax error, unrecognized expression: /about
    at Function.ga.error (jquery-2.1.4.min.js:2)
    at ga.tokenize (jquery-2.1.4.min.js:2)
    at ga.select (jquery-2.1.4.min.js:2)
    at Function.ga [as find] (jquery-2.1.4.min.js:2)
    at n.fn.init.find (jquery-2.1.4.min.js:2)
    at new n.fn.init (jquery-2.1.4.min.js:2)
    at n (jquery-2.1.4.min.js:2)

Uncaught Error: Syntax error, unrecognized expression: /prod

有人能告诉我它为什么会发生吗？哪里出错了？？

could someone tell me why its happening? where am doing wrong.?

更多信息：

实际上 #header 在主div中提到，用于应用一些滚动动画。每当我尝试从一个链接导航到另一个链接（例如HOME | ABOUT | PROD.INFO）时，它将提供平滑的滚动效果。

the #header actually mentioned in main div, that used to apply some scroll animation. whenever i tried to navigate from one link to another (ex. HOME|ABOUT|PROD.INFO) it will give smooth scrolling effect.

我遇到了 ng2-scroll-to 和 ngx-page-scroll ，但无法制作有效地使用它。我需要你的建议。请分享一些与我的问题相关的示例实例。

I've came across ng2-scroll-to and ngx-page-scroll, but could not make use of it effectively. I need your advice please. pls share some sample live example related to my issue.

提前致谢

推荐答案

你可以使用片段

<li><a class="nav-link" [routerLink]="['/']" fragment="about" (click)="goToAbout()>About</a></li>

constructor( private route: ActivatedRoute, private router: Router ) {}

goToAbout() {
 this.route.fragment.subscribe((fragment) => {
   const elm = document.querySelector ( "#" + fragment)
   document.querySelector( "#" + fragment).scrollIntoView(elm)
 });
}

这篇关于Angular 2 - bootstrap nav的问题< li>< a href ="＃header">< / a>< / li>在路由设置中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！