Question

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

我发现这两个人不能一起工作，如果有人可以帮助我解决这个问题，我会感到很沮丧吗？

我尝试过ngx-scroll-to但由于某种原因它根本没用。（可能是因为我使用包装页面内容的ngx-sidebar）。如果我禁用一个功能，另一个功能，但永远不会在一起。

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

  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;
    }
  }
});

}

你可以看到我尝试添加＆＃34;！tree.queryParams＆＃34;第一个功能，没有帮助！

我想知道是否有办法将功能放在一起并处理它们/ 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;
              }
          }
      }
    });

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

1 个答案: