小编Mic*_*cht的帖子

我是角度新手。@abacritt/angularx-social-login 中的 Google 按钮只是一个图标，我想通过将图标放置在 div 中并在其旁边写上“使用 Google 登录”来更改其外观。我只需单击图标即可通过 Google 进行身份验证，但我无法理解如何通过单击其外部 div 以编程方式单击它。我一直在尝试 ViewChild 但没有成功。@abacritt/angularx-social-login 包附带了该<asl-google-signin-button></asl-google-signin-button>元素，该元素在屏幕上显示图标。单击时，此元素将启动 Google 身份验证。

这是我的相关代码文件：

google-signin-button.component.html

<div (click)="clickGoogleBtn()" class="google_signin">
    <asl-google-signin-button #googleBtnRef></asl-google-signin-button>
</div>

谷歌登录按钮.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { SocialAuthService, SocialUser } from '@abacritt/angularx-social-login';
import {Router} from '@angular/router';
import { ElementRef } from '@angular/core';


@Component({
  selector: 'app-google-signin-button',
  templateUrl: './google-signin-button.component.html',
  styleUrls: ['./google-signin-button.component.scss']
})
export class GoogleSigninButtonComponent implements OnInit{
  @ViewChild('googleBtnRef')
  googleBtn?: ElementRef;

  user?: SocialUser;

  constructor(
    private router: Router,
    private socialAuthService: SocialAuthService) { }

  ngOnInit(): …