Angular 方法在 ngOnIt 中有效，但在单击按钮时无法正常工作

Question

我正在使用 Facebook SDK for Javascript with ng2-facebook-sdk

我遇到了奇怪的问题，谁能帮我一下。

在下面的代码中，我正在初始化 Facebook SDK 的选项并为用户启动登录，但是当我将代码放入 ngOnIt() 时，它始终有效（始终有效意味着：用户将获得弹出消息准备输入 Facebook 用户名和密码，一旦成功登录，弹出窗口将关闭并返回主页）但是这 不可取，因为用户打开页面会强制用户使用 Facebook[ 登录=15=]

但是当我将代码放在 ngOnI 之外的某个方法下时，它不起作用（此处出现弹出窗口，一旦用户输入凭据并提交，弹出窗口变为白色并保持不变，并且不会返回主页）

触发我下面用的方法HTML

<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" (click)="loginWithFacebook()">Login</button>
</form>

不起作用

import { Component, OnInit } from '@angular/core';
import { FacebookService, LoginResponse, InitParams } from 'ngx-facebook';
import { Router } from '@angular/router';

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

    constructor(private fb: FacebookService, private rt: Router) {}

    ngOnInit() {}

    loginWithFacebook() {
        const initParams: InitParams = {
        appId: 'xxx',
        xfbml: true,
        version: 'v2.11'
    };
    this.fb.init(initParams);
    this.fb.login()
        .then((response: LoginResponse) => console.log(response))
        .catch((error: any) => console.error(error));
    }
}

有效

import { Component, OnInit } from '@angular/core';
import { FacebookService, LoginResponse, InitParams } from 'ngx-facebook';
import { Router } from '@angular/router';

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

    constructor(private fb: FacebookService, private rt: Router) {}

    ngOnInit() {

        const initParams: InitParams = {
            appId: 'xxx',
            xfbml: true,
            version: 'v2.11'
        };

        this.fb.init(initParams);
        this.fb.login()
            .then((response: LoginResponse) => console.log(response))
            .catch((error: any) => console.error(error));
    }
}

Answer 1

你应该使用type="button"

type="submit" 按钮用于提交表单。如果您想创建一个自定义按钮，然后使用 JavaScript 自定义行为，您需要使用，或者更好的是，一个元素。

Angular 方法在 ngOnIt 中有效，但在单击按钮时无法正常工作

Angular method works in ngOnIt but doesn't work properly on button click

facebook-graph-api

facebook-javascript-sdk

angular