(Angular 8) 为什么点击事件去路由'/#'？

Question

我写这段代码是为了使用SNS登录服务。来自SNS的return回调地址是localhost:4200/account/login。地址是当前事件发生的页面。该函数在 html 中声明（单击）事件，并且在 onInit 中检查声明函数的回调 this.initializeNaver()。

<div id="naverIdLogin" (click)="initializeNaver()">
        <a id="naverIdLogin_loginButton" href="#">
          <img src="../assets/images/icons/naver_login_button.PNG" style="width: 70%; height: 55px">
        </a>
</div>

ngOnInit() {
    this.initializeNaver();
  }

点击这个div按钮，转到localhost:4200/#

但 initializeNaver() 写入第一行 event.preventDefault()，然后第一次单击“#”不起作用。第二次点击，工作回调函数调用。

我想先点击，有效的回调函数。请帮忙

这是功能代码。

 async initializeNaver() {
    event.preventDefault();
     // call naver.com login api sdk lib
     // login success, callbackUrl+param return 
     const naverLogin = await new naver.LoginWithNaverId(
      {
        clientId: "***",
        callbackUrl: "http://localhost:4200/account/login",
        isPopup: false,
        loginButton: {color: "green", type: 3, height: 60},
        callbackHandle: true
      }
    );

    // Invoke int to initialize login information
    naverLogin.init();

    const that = this;
    // login status check
    naverLogin.getLoginStatus(function (status) {
      if (status) {
        const name = naverLogin.user.getName();
        const email = naverLogin.user.getEmail();
        const uniqId = naverLogin.user.getId();
        const key = '';
        that.spinnerService.start();
        that.accountService.naverlogin('', name, email, uniqId, key)
          .subscribe(async (res: IResponse<any>) => {
            if (res.code === RESPONSE_CODE.SUCCESS) {
              that.spinnerService.stop();
              that.sessionService.init(res.data);
              if (that.isRemember) {
                localStorage.setItem('id', that.loginForm.getRawValue().id);
              } else {
                localStorage.removeItem('id');
              }
              that.store.dispatch(new RouterActions.Go({path: ['']}));
            } else if (res.code === RESPONSE_CODE.NAVER_NOT_USER) {
              const login = await that.matDialog.open(AppDialogNaverCertifyComponent, {
                panelClass: 'dialog-confirm-container',
                disableClose: false,
                data: {name: name, email: email, uniqId: uniqId}
              });
              that.spinnerService.stop();
              login.afterClosed().subscribe(() => {
                that.store.dispatch(new RouterActions.Go({path: ['']}));
              });
            }
        })

      } else {
        console.log("AccessToken이 올바르지 않습니다.");
      }
    });
  }

Answer 1

尝试在锚标记而不是父标记上添加点击事件 div。您的点击必须发生在锚 tag.So 上，它将重定向到指定的 href。

其他选项是添加点击锚点并添加 event.preventDefault() .

例如：

 <div id="naverIdLogin" (click)="initializeNaver($event)">
    <a id="naverIdLogin_loginButton" href="#" (click)="preventDefault($event)">
      <img src="../assets/images/icons/naver_login_button.PNG" style="width: 70%; height: 55px">
    </a>

您可以了解有关 event.preventDeafult here 的更多信息。或将点击事件更改为 a 标签

<div id="naverIdLogin" >
    <a id="naverIdLogin_loginButton" href="#" (click)="initializeNaver($event)">
      <img src="../assets/images/icons/naver_login_button.PNG" style="width: 70%; height: 55px">
    </a>

另加

async initializeNaver($event) {
      $event.preventDefault();    
       /*Your code here*/
  }

Answer 2

改变

<a id="naverIdLogin_loginButton" href="#">

到

<a id="naverIdLogin_loginButton">

删除href="#"

(Angular 8) 为什么点击事件去路由'/#'？

(Angular8) Why click event go to routing '/#'?

javascript

routes

callback

single-page-application

angular