Question

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

我面临着奇怪的问题，有人可以帮助我。

在下面的代码中，我正在初始化Facebook SDK的选项并为用户启动登录但是当我将代码放入ngOnIt()时，它始终有效（工作始终意味着：用户将弹出输入facebook用户名和密码，一旦成功登录弹出窗口关闭并返回主页面）但是这个不是优选的，因为用户打开页面迫使用户使用Facebook登录

但是当我把代码放在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

您应该使用<Controls:MetroWindow.WindowButtonCommands> <Controls:WindowButtonCommands VerticalAlignment="Top" Height="30" Style="{DynamicResource MahApps.Metro.Styles.WindowButtonCommands.Win10}" /> </Controls:MetroWindow.WindowButtonCommands> <Controls:MetroWindow.LeftWindowCommands> <Controls:WindowCommands VerticalAlignment="Bottom" Height="30"> </Controls:WindowCommands> </Controls:MetroWindow.LeftWindowCommands> <Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands VerticalAlignment="Top" Height="30"> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands> <Controls:MetroWindow.TitleTemplate> <DataTemplate> <Grid Height="30" VerticalAlignment="Bottom"> <TextBlock Margin="8 -1 0 0" VerticalAlignment="Center" FontFamily="{DynamicResource HeaderFontFamily}" FontSize="{DynamicResource WindowTitleFontSize}" Text="{TemplateBinding Content}" TextTrimming="CharacterEllipsis" /> </Grid> </DataTemplate> </Controls:MetroWindow.TitleTemplate>

type="button"按钮用于提交表单。如果要创建自定义按钮，然后使用JavaScript自定义行为，则需要使用或更好地使用元素。

Angular方法适用于ngOnIt，但在按钮点击时无法正常工作

1 个答案: