如何导航到使用id属性标识的页面的某些部分?
例:
我需要导航到我页面上的“结构”段落
<div id="info"> <h3>Info</h3> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p> </div> <div id="structure"> <h3>Structure</h3> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p> </div>
我有一个以下导航结构:
<li> <ul materialize="collapsible" class="collapsible" data-collapsible="accordion"> <li><a routerLink="policies" class="collapsible-header">Policies</a> <div class="collapsible-body"> <ul> <li><a >Info</a></li> <li><a >Structure</a></li> <li><a >Something Else</a></li> </ul> </div> </li> </ul> </li>
我的理解是,在Angular1.0中,我只需使用以下内容导航到页面部分:ui-sref =“policies({‘#’:’structure’})”或href =“#structure”或ui -sref =“policies”href =“#structure”……
我怎么能在Angular2中做到这一点?我查看了docs中的Fragment示例:查询参数和片段部分,我发现它们的例子非常令人困惑,对于这样一个潜在的简单任务来说有点矫枉过正
在HTML文件中执行单击后,我使用了上一个答案的组合:
<ul> <li><a (click)="internalRoute("routeexample1","info")">Info</a></li> <li><a (click)="internalRoute("routeexample2","structure")>Structure</a></li> <li><a (click)="internalRoute("routeexample3","something")>Something Else</a </li> </ul>
在组件打字稿文件(组件文件)中,必须定义相应的导航,包括路由器和导航:
constructor(private router:Router) { } internalRoute(page,dst){ this.sectionScroll=dst; this.router.navigate([page],{fragment: dst}); }
有了这个,应用程序可以导航到相应的页面,但不能导航到特定的部分.要转到定义的(理想的)部分,需要进行滚动.为此,我们最初定义一个函数来滚动到特定的“id”(Scroll Function here):
doScroll() { if (!this.sectionScroll) { return; } try { var elements = document.getElementById(this.sectionScroll); elements.scrollIntoView(); } finally{ this.sectionScroll = null; } }
最后,我们需要捕获导航事件并执行滚动(修改ngInit函数)(Event capturing page Init):
ngOnInit() { this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } this.doScroll(); this.sectionScroll= null; }); }
这个对我有用.希望有所帮助.