Angular2 - Meteor - 如何自定义帐户 UI 布局答案

【问题标题】：Angular2 - Meteor - How to customize accounts-ui layoutAngular2 - Meteor - 如何自定义帐户 UI 布局
【发布时间】：2016-03-03 10:31:42
【问题描述】：

我一直在关注这个非常有趣的tutorial，关于使用 angular2 和 Meteor。

一切都很顺利，但现在我想使用我自己的 Bootstrap 3 模式进行登录/登录功能。

本教程使用ng2-meteor-accounts-ui，它是“accounts-ui”包的 loginButtons 视图的包装器。

我找到了有关如何自定义 Meteor-accounts-ui 默认包的资源和文档，但在这个包中没有。我试图查看源代码，但流星模块仅在构建时间后的“构建”文件夹中可用，并且所有 HTML 都是通过连接 JS 字符串构建的。

由于缺少文档，我不知道如何编辑它。我必须为流星包构建我的 ng2 包装器吗？

【问题讨论】：

嗨@Rayjax，您成功自定义帐户-ui 布局了吗？我也遇到了同样的问题。谢谢
坦率地说，我切换回了流星/火焰。太多 alpha-unstable-notdocumented-notintegrated--notcommunityknown 问题。但是现在已经几个月了，ng2现在是beta版，我想与meteor本身的集成会越来越成熟。如果您确实找到了解决方案，请回答，我很乐意接受。
感谢您告诉我！一旦我找到路，我会在这里发布。

标签： twitter-bootstrap meteor angular meteor-accounts angular2-meteor

【解决方案1】：

你有几个选择..

您可以将{{> logginButtons }} 放入模态框
您可以使用 accounts-ui-unstyled 包摆脱默认样式
您可以完全删除accounts-ui，并自行构建您的ui，只需使用内置方法与服务器交互即可

http://docs.meteor.com/#/full/meteor_loginwithpassword http://docs.meteor.com/#/full/meteor_loginwithexternalservice

【讨论】：

遗憾的是，我删除了 Blaze，因为我使用 angular2 作为前端框架。我可以添加 blaze 并使用 {{>loginButtons}} 但同时使用两个前端框架将是一个肮脏的解决方案。我正在为帐户 UI 使用 barbatus 包装器，所以我找不到无样式的版本。您的第三个选项似乎是最好的一个，我必须将所有按钮绑定到角度 UI 中的 Meteor 方法
@Rayjax 然后使用 3. variant.. 删除 accounts-ui 并自行使用 api 方法

【解决方案2】：

您可以删除 {{> logginButtons }} 并直接调用方法：

 Meteor.loginWithFacebook({
    requestPermissions: ['public_profile', 'user_location', 'user_photos']
  }, function (err) {
    console.log(err);
    if (err)
    {
      Session.set('errorMessage', err.reason || 'Unknown error');
    }
    else {

      $state.go('menu.home', {reloadUser: true}, {reload: true});
    }
  });

【讨论】：