角度路由/路由器在捕获参数时无法获取片段

Question

我正在开发一个角度网络应用程序，在主页上有一些部分使用片段进行滚动(介绍、关于、联系)，我也有使用 odic 的社交登录，它返回参数(例如 blah？=stuff_#)事实上，当我登录时，我看到一个带有长片段的 url，它烦人地以 # 开头。

我发现两者不能一起工作，如果有人可以帮助我解决这个问题，我正在犹豫？

我尝试了ngx-scroll-to，但由于某种原因它根本不起作用。(可能是因为我使用 ngx 侧边栏来包装页面内容)。如果我禁用一个功能，另一个功能可以工作，但永远不会在一起。

在我的app.component.ts中，ngOnInit中有2个函数：

ngOnInit(): void {
this.router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
const tree = this.router.parseUrl(this.router.url);
if (tree.fragment && !tree.queryParams) {
const element = document.querySelector("#" + tree.fragment);
if (element) { element.scrollIntoView({ behavior: "instant", block: "start", inline: "start" }); }
}
}
});

this.activatedRoute.queryParams.subscribe((params: Params) => {
const param = params['externalLoginStatus'];
if (param) {
const status = <ExternalLoginStatus>+param;
switch (status) {
case ExternalLoginStatus.CreateAccount:
this.router.navigate(['createaccount']);
break;
default:
break;
}
}
});

}

如您所见，我尝试将"！tree.queryParams"添加到第一个函数中，但没有帮助！

我想知道是否有办法将这些函数放在一起并处理它们，以便/home#intro 等被识别为锚点，但其他任何东西都被解析为处理社交登录......我想我可以针对一些存储的值测试片段，如果它不在其中，那么继续使用其他函数？？欢迎任何想法！提前谢谢。

Answer 1

我想出了如何组合它们，它似乎有效;

我认为问题是我使用了 2 个订阅......我不能确定。无论如何，这是我的OnInit的代码，如果它可能会帮助其他人：

>     this.fragSub = this.router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
const tree = this.router.parseUrl(this.router.url);
if (tree.fragment) {
let element;
switch (tree.fragment) {
case 'intro':                      
element = document.querySelector("#" + tree.fragment)
if (element) { element.scrollIntoView({ behavior: "instant", block: "start", inline: "start" }); };
break;
case 'about':
element = document.querySelector("#" + tree.fragment)
if (element) { element.scrollIntoView({ behavior: "instant", block: "start", inline: "start" }); };
break;
case 'contact':
element = document.querySelector("#" + tree.fragment)
if (element) { element.scrollIntoView({ behavior: "instant", block: "start", inline: "start" }); };
break;
default:
break;
}
}
}
const tree = this.router.parseUrl(this.router.url);
if (tree.queryParams['externalLoginStatus']) {
const param = tree.queryParams['externalLoginStatus'];
if (param) {
const status = <ExternalLoginStatus>+param;
switch (status) {
case ExternalLoginStatus.CreateAccount:
this.router.navigate(['createaccount']);
break;
default:
break;
}
}
}
});