- 首页
- 前端开发
- Angular 2 - 引导程序导航问题 <li><a href=“#header"></a></li>在路由设置中
Angular 2 - 引导程序导航问题 <li><a href=“#header"></a></li>在路由设置中
[英] Angular 2 - issue with bootstrap nav <li><a href="#header"></a></li> in routing set up
本文介绍了Angular 2 - 引导程序导航问题 <li><a href=“#header"></a></li>在路由设置中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将普通的引导程序页面转换为 Angular 2 中的组件.我在构建导航时实际上遇到了问题.最初的标签
<!-- 导航--><导航><div class="nav nav-wrapper navbar-fixed-top"><div class="container-fluid"><!-- 菜单选项--><ul class="nav-justified hide-on-med-and-down"><li><a href="#header">关于</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"><!-- 头像【方形】--><img src="images/profile-pic.png">
<h6 class="text-center text-capitalize">约翰·罗伯特·史密斯</h6>
<div id="nav-link-wrapper"><!-- 侧边菜单选项--><ul><li><a class="nav-link" href="#header">关于</a></li><li><a class="nav-link" href="#prodcutInfo">Prod.Info<</a></li>
<!-- ./Side Nav --><!-- 侧面导航遮罩--><div id="side-nav-mask"></div>
</nav>
有人能告诉我如何将普通的 a href 标签转换成角度路线.
app.routing.ts
import { ModuleWithProviders } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './about/about.component' 导入 { AboutComponent };从 './prod/prod.component' 导入 { ProdComponent };const appRoutes: 路由 = [{ path: '', redirectTo: 'about', pathMatch: 'full' },{ path: 'about', 组件: AboutComponent , 数据: { state: 'about'} },{ path: 'prod', 组件: ProdComponent , 数据: { state: 'prod'} },];export const AppRouting = RouterModule.forRoot(appRoutes, {useHash: 真});
问题:
当我像下面这样改变时
<li><a class="nav-link" [routerLink]="['/']">关于</a></li><li><a class="nav-link" [routerLink]="['/prodcutInfo']">Prod.Info<</a></li>
它给了我如下
未捕获的错误:语法错误，无法识别的表达式:/about在 Function.ga.error (jquery-2.1.4.min.js:2)在 ga.tokenize (jquery-2.1.4.min.js:2)在 ga.select (jquery-2.1.4.min.js:2)在 Function.ga [as find] (jquery-2.1.4.min.js:2)在 n.fn.init.find (jquery-2.1.4.min.js:2)在新的 n.fn.init (jquery-2.1.4.min.js:2)在 n (jquery-2.1.4.min.js:2)未捕获的错误:语法错误，无法识别的表达式:/prod
谁能告诉我为什么会这样?哪里做错了.?
更多信息:
#header 实际上在主 div 中提到过，用于应用一些滚动动画.每当我尝试从一个链接导航到另一个链接(例如主页|关于|PROD.INFO)时，它都会产生平滑的滚动效果.
我遇到过 ng2-scroll-to 和 ngx-page-scroll，但无法有效利用它.我需要你的建议.请分享一些与我的问题相关的示例现场示例.
提前致谢
解决方案
可以使用fragment
<li><a class="nav-link" [routerLink]="['/']" fragment="about" (click)="goToAbout()>About</a></li>构造函数(私有路由:ActivatedRoute，私有路由器:路由器){}去关于(){this.route.fragment.subscribe((fragment) => {const elm = document.querySelector ("#" + 片段)document.querySelector("#" + fragment).scrollIntoView(elm)});}
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>
could someone tell how to convert that normal a href tag into angular route.
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
});
issue:
when i change like below
<li><a class="nav-link" [routerLink]="['/']">About</a></li>
<li><a class="nav-link" [routerLink]="['/prodcutInfo']">Prod.Info<</a></li>
it gives me like below
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.?
more 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.
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.
Thanks in advance
解决方案
you can use fragment
<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 - 引导程序导航问题 <li><a href=“#header"></a></li>在路由设置中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
