通过单击其外部 div 角度以编程方式单击库中的按钮

Question

我是角度新手。@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(): void {
    this.socialAuthService.authState.subscribe((user:SocialUser) => {
      this.user = user;
      console.log(user);
    })
  }

  clickGoogleBtn() {
    console.log(this.googleBtn);
    const event = new MouseEvent('click', {
      view: window,
      bubbles: false,
      cancelable: true
    })
   this.googleBtn?.nativeElement.dispatchEvent(event);
    
  }

Answer 1

有两本很好的读物向您展示了如何更改按钮的外观。

angularrx github
登录按钮文档

一个简单的例子

将类型“图标”更改为“标准”以获取按钮内的文本

<asl-google-signin-button type="standard" size="large"> </asl-google-signin-button>

详细信息来自他们的 Github

使用谷歌登录

GoogleLoginProvider 没有像其他提供程序那样的signIn() 方法，登录流程由 gis 客户端生成的按钮触发。调用 SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID) 不会有任何效果。

相反，请确保您订阅了身份验证状态，并将以下 GoogleSigninButtonDirective 添加到组件模板中以包装“使用 Google 登录”按钮：

<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>

选项：

姓名	类型	价值	默认
类型	细绳	“图标”或“标准”	'图标'
尺寸	细绳	“小”、“中”或“大”	'中等的'
形状	细绳	“方形”、“圆形”、“药丸”或“矩形”	'矩形的'	文本	'signin_with'、'signup_with'或'continue_with'
宽度	细绳	“200 - 400”
主题	细绳	“轮廓”、“填充蓝色”或“填充黑色”	'大纲'
徽标对齐	细绳	“左”或“中”	'左边'

仅当 GoogleLoginProvider 在 SocialAuthServiceConfig 中注册时，这才有效。