angular - 进一步推广按钮组件

Question

我有两个组件:

  <app-google-login-button></app-social-login-button>
  <app-facebook-login-button></app-facebook-login-button>

app-facebook-login-button 看起来像这样:

<button type="button" class="btn btn-label btn-facebook" (click)="facebookSignIn()"
  *ngIf="!(isMobile | async)?.matches">
  <label>
    <fa-icon [icon]="['fab', 'facebook']" size="xs"></fa-icon>
  </label> Sign in with Facebook
</button>
<button type="button" class="btn btn-label btn-facebook" (click)="mobileFacebookSignIn()"
  *ngIf="(isMobile | async)?.matches">
  <label>
    <fa-icon [icon]="['fab', 'facebook']" size="xs"></fa-icon>
  </label> Sign in with Facebook
</button>

app-google-login-button 看起来像这样:

<button type="button" class="btn btn-label btn-google" (click)="googleSignIn()" *ngIf="!(isMobile | async)?.matches">
  <label>
    <fa-icon [icon]="['fab', 'google']" size="xs"></fa-icon>
  </label> Sign in with Google
</button>
<button type="button" class="btn btn-label btn-google" (click)="mobileGoogleSignIn()" *ngIf="(isMobile | async)?.matches">
  <label>
    <fa-icon [icon]="['fab', 'google']" size="xs"></fa-icon>
  </label> Sign in with Google
</button>

我想将两者结合起来并拥有一个通用的 app-social-login-button。组件会是什么样子？

Answer 1

定义一个声明可配置选项的接口(interface)，但也包含一个用于单击按钮时的回调函数。如果您不想为每个按钮注入(inject)回调，那么另一种方法是定义一个字符串标记，如“facebook”，并将该值传递给共享服务。

export interface SocialButton {
    // button text
    title: string;

    // Font Awesome icon
    icon: any;

    // CSS class for the button
    btn: string;

    // make mobile just a condition of the click
    click: (mobile: boolean) => void;
}

然后您可以将上述接口(interface)的对象作为参数传递给组件。

@Component({
    selector: 'app-social-login-button',
    template: `
        <button type="button"
                [ngClass]="getClass()"
                (click)="click()">
            <label>
                <fa-icon [icon]="options.icon" size="xs"></fa-icon>
            </label> Sign in with {{options.title}}
        </button>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SocialLoginButtonComponent {

    @Input()
    public options: SocialButton;

    public isMobile: Observable<any>;

    public getClass() {
        return {
            'btn': true,
            'btn-label': true,
            [this.options.btn]: true
        };
    }

    public click() {
        this.isMobile
            .pipe(first())
            .subscribe(value => this.options.click(value));
    }
}

您可以定义一个共享服务，它将 SocialButton 选项创建为一个数组。

@Injectable()
export class SocialButtonService {
    public buttons(): SocialButton[] {
        return [this.faceBook(), this.google()];
    }

    public faceBook(): SocialButton {
        return {title: 'Facebook', icon: ['fab', 'facebook'], btn: 'btb-facebook', click: (m) => this.signIn('facebook', m)}
    }

    public google(): SocialButton {
        return {title: 'Google', icon: ['fab', 'google'], btn: 'btb-google', click: (m) => this.signIn('google', m)}
    }

    public signIn(platform: string, mobile: boolean) {
        // do work
    }
}

您现在可以在另一个组件中轻松显示所有按钮。

@Component({
    template: `
    <app-social-login-button *ngFor="let option of options" [options]="option"></app-social-login-button>
    `
})
export class SocialLoginButtonsComponent {
    public options: SocialButton[];

    public constructor(service: SocialButtonService) {
        this.options = service.buttons();
    }
}