(Angular8)为什么点击事件会进入路由'#'？

Question

我写了这段代码来使用SNS登录服务。SNS的回调地址是localhost:4200accountlogin。这个地址是当前事件发生的页面。这个函数是在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 .你的点击必须发生在锚标签上，所以它会重定向到指定的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 此处.或将点击事件改为 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="#"