[英]Angular2 How to navigate to certain section of the page identified with an id attribute
如何导航到使用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中做到这一点? 我查看了文档中的Fragment示例:查询参数和片段部分,我发现它们的例子非常令人困惑,对于这样一个潜在的简单任务来说有点矫枉过正
Angular 2:我更喜欢使用scrollIntoView()方法scrollIntoView 。 它将在浏览器中提供平滑的滚动过渡效果。
HTML代码
<div #info id="info">
<h3>Info</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div #structure 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 (click)="infoStruc()"><a >Info</a></li>
<li (click)="moveToStructure()"><a >Structure</a></li>
<li><a >Something Else</a></li>
</ul>
</div>
</li>
</ul>
</li>
在组件中。
@Component({
selector: 'my-app',
template: `template.html `
})
export class AppComponent {
@ViewChild('structure') public structure:ElementRef;
@ViewChild('info') public info:ElementRef;
public moveToStructure():void {
this.structure.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
}
public infoStruc():void {
setImmediate(() => {
this.info.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
});
}
}
在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 ):
doScroll() {
if (!this.sectionScroll) {
return;
}
try {
var elements = document.getElementById(this.sectionScroll);
elements.scrollIntoView();
}
finally{
this.sectionScroll = null;
}
}
最后,我们需要捕获导航事件并执行滚动(修改ngInit函数)( 事件捕获页面Init ):
ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
this.doScroll();
this.sectionScroll= null;
});
}
这个对我有用。 希望有所帮助。
您可以为html链接添加fragment
属性
<ul>
<li><a [routerLink]="['routeexample1']" fragment="info">Info</a></li>
<li><a [routerLink]="['routeexample2']" fragment="structure">Structure</a></li>
<li><a [routerLink]="['routeexample3']" fragment="something">Something Else</a></li>
</ul>
要以编程方式导航,您可以这样做
this.router.navigate( ['routeexample1' ], {fragment: 'structure'});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.