如何解决链接到 Angular 9 中不同页面的特定内容
假设网页上有三个类别 - 大陆、国家、州。 我目前正在处理一个放置在不同页面上的按钮。我希望当单击按钮时,我的页面将自动重定向到类别页面并滚动到第三部分,即状态部分。 我对 Angular 有点陌生,并尝试了许多其他网站上提到的方法,例如使用 RouterLink、导航、路线,但目前没有任何效果符合我的预期。 有人可以为此提供帮助或分享一些已经开发的链接。
提前致谢。
解决方法
很简单。在第一页这样在路由器中传递状态
<button [routerLink] = "['/page2',{pageSec: 'section2'}]">Go to section 2</button>
<br>
<br>
<button [routerLink] = "['/page2',{pageSec: 'section3'}]" >Go to Section 3</button>
然后在第二页,使用激活的路由从路由器获取状态对象。使用 ViewChild 装饰器与 DOM 进行通信。订阅 ngAfterInit 中的 Activated Route params Observable,获取您需要的参数,然后滚动到视图中。检查下面的片段以了解我的意思
@Component({
selector: 'app-page2',templateUrl: './page2.component.html',styleUrls: ['./page2.component.scss']
})
export class Page2Component implements AfterViewInit {
constructor(private http: HttpClient,private activeRoute: ActivatedRoute,) { }
@ViewChild('container') container: ElementRef<HTMLElement>;
ngAfterViewInit(): void {
this.activeRoute.params.subscribe(param => {
// alert(param.pageSec)
if(param.pageSec){
const section = this.container.nativeElement.querySelector(`#${param.pageSec}`)
console.log(section)
section?.scrollIntoView()
}
})
}
}
在 Page2 Html make 和一个选择器上。在这个例子中,我制作了我的选择器容器。然后给你的每个部分一个 id。 id 是你的伤口滚动进去的。 您的 html 应如下所示。
<div #container>
............
<div id="section1">
.......
</div>
<div id="section2">
....
</div>
<div id="section3">
.....
</div>
</div>
就是这样!!!!确保使用 ngAfterInit 而不是 ngOninit,因为初始化组件后 Dom 元素不会立即可用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。