小编Sai*_*aif的帖子

如何使用角度材料2 FAB按钮打开浏览输入对话框？这可以通过这种方式在HTML中完成.

<button type="button">
    <label for="file-input">click</label>
</button>
<input type="file" id="file-input" style="display:none">

我尝试使用与材料2相同的方法,但它不起作用.

<button md-mini-fab type="button">
    <label for="fileToUpload">
        <md-icon>add</md-icon>
    </label>
</button>
<input id="fileToUpload" type="file" style="display:none;">

还有其他方法可行吗？谢谢.

这个问题是参考这个 Github问题,mat-menu使用鼠标悬停不能切换,我基本上试图用角度材料的菜单替换基于bootstrap的水平导航菜单.阻止我复制基于bootstrap的菜单的唯一一件事就是mat-menu在悬停时打开和关闭.正如上面的Github问题所提到的,有一些解决方法可以实现我想要的,比如使用mouseEnter

(mouseenter)="menuTrigger.openMenu()"

或者在Mat-menu中添加一个span以便绑定mat-menu,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>

但是没有一个解决方案似乎涵盖了每一个小场景,

例如

如上面的Github问题所述,第一个SO解决方案存在以下问题.

• 将鼠标光标悬停在按钮上会弹出菜单.但是如果你点击按钮,它将隐藏并显示菜单.恕我直言,这是一个错误.
• 要隐藏菜单,用户需要单击菜单外部.理想情况下,如果鼠标光标位于 超过400毫秒
  的区域(包括按钮,菜单和子菜单)之外,则菜单将被隐藏
  .

并且在试图解决上述问题之一但不能正常工作的跨度解决方案中,例如

悬停MatMenuTrigger确实mat-menu按预期打开,但如果用户在不输入的情况下移开鼠标mat-menu,则它不会自动关闭,这是错误的.

同时移动到其中一个级别的两个子菜单也关闭了一级菜单,这不是我想要的,

PS将鼠标从一个打开的菜单移动到下一个兄弟菜单不会打开下一个菜单.我想这可能是难以实现提到这里,但我认为,其中的一些可能实现的吧？

这是一个基本的stackBlitz,它重现了我正在经历的,任何帮助表示赞赏.

我正在尝试将支付网关合并到 angular 应用程序中，我发现以下付款合作伙伴提供的用于合并的 JavaScript 片段，我通过添加ngNoForm 对其进行了调整，并使其与 angular 一起使用；堆栈闪电战

<form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="amount" value="1" >
<input type="hidden" name="currCode" value="608" >
<input type="hidden" name="payMethod" value="CC">
<input type="submit" name="submit">
</form>

接下来不是<Form> POST + Action直接从组件模板使用 HTML ，我想对我的后端服务器进行 REST 调用，执行其他一些步骤，并将该 API 响应映射到我的支付合作伙伴期望的内容，然后使用 HttpClient POST 重定向到我的支付合作伙伴，这将应该做同样的事情并重定向到应该负责支付过程的支付合作伙伴网站，所以简而言之，我想以编程方式实现同​​样的事情，我尝试过：

redirectToPaymentHandler(): Observable<any> {
  const urlEncodeData = 'amount=1&currCode=608&payMethod=CC';
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
  headers = headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');

  return this.httpClient.post('https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp',
    urlEncodeData, {
      headers,
      responseType: 'text'
    }).pipe(catchError((error) => {
      console.log(error)
      return …

假设我有两个类,一个是:

class A{
public:
    void f1()
    {
        cout << "function 1";
    }
    void f2()
    {
        cout << "function 2";
    }
    void f3()
    {
        cout << "function 3";
    }
};

现在我希望class B包含Aexcept的所有函数f3.

我在做的是:

class B: public A
{
    private:
    void f3()
    {

    }
};

据我所知,B::f3()是隐藏的定义A::f3(),并且B::f3()是私有的,f3()无法通过类访问B.但我仍然可以这样称呼:

B var();
var.A::f3();

有什么办法,我可以完全隐藏f3从类B使用继承和不改变类A？

考虑以下组件模板，我试图实现重新排序角度材料 2 和简单 li 标签的列表元素的能力。

此功能非常适合 li-tag 标签，但在 md-list-item 的情况下无法正常工作

这是为什么？

我的模板：

<md-nav-list>
  <md-list-item *ngFor="let i of arr" draggable="true" (dragenter)="dragenter($event)" (dragstart)="dragstart($event)">
    {{i}}
  </md-list-item>
</md-nav-list>

<ul>
  <li *ngFor="let i of arr" draggable="true" (dragenter)="dragenter($event)" (dragstart)="dragstart($event)">{{i}}</li>
</ul>

调用函数：

  source: any;

  /**
   * CHECKS IF ONE ELEMENT LIES BEFORE THE OTHER
  */
  isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
      for (var cur = a; cur; cur = cur.previousSibling) {
        if (cur === b) {
          return true;
        }
      }
    }
    return false;
  }
  /** …

我在本地使用以下highcharts依赖项：

• “角高图”：“ 5.2.12”
• “ highcharts”：“ 6.1.0”
• “ @ types / highcharts”：“ 5.0.19”

这是我的源代码的现场演示，

首先，我想指出的是，highCharts的noData功能的用法和启用是非常阴暗的。关于如何正确使用它，没有适当的指导。

现在谈到这个问题，几天前，我意识到有必要显示适当的“无可用数据”消息，而不是显示空白图表。我进行了一些研究，发现可以在高级图表中启用它，并在纯JavaScript中找到了可行的演示。那么现在我们如何在Angular 5中使用它呢？那需要更多的研发，最后我弄清楚了，

import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
...    
@NgModule({
  ...
  providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [noDataToDisplay] }
]

（注意：^^这种方法不适用于链接的stackBlits演示，不知道为什么！）

我确实使用上述方法成功地在我的仓库中启用了它，但是它并不健壮，也就是说，它看起来并不一致。

接下来，我想动态切换noData消息，即以编程方式对其进行更新，因此尝试了以下方法：

const options = this.chartConfig.ref.options;
  options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
this.chartConfig.ref.update(options, true);

当您从图例框中切换系列的可见性时，这种方法确实起作用了，但是现在看来，这似乎也不起作用。我有以下问题，

1. 在angular 5中使用noData选项的正确方法是什么
2. 如何确保它始终显示？可能使用setData（[]）或setData（null）之类的不同配置使它始终出现，但是我无法找出其不一致背后的根本原因。
3. 如何动态切换noData消息。

另外，如果有任何我可以改善的地方，请提前告知我。

PS我确实设法找到了有关使用纯JavaScript实现功能的小提琴，但还无法使用有角度的图表来实现。这是小提琴似乎正在使用的附加代码。

if (!chart.hasData()) {
    chart.hideNoData();
    chart.showNoData("Your custom error message");
}

这些方法可能不适用于我正在使用的highcharts版本。

感谢@Pandiyan修复了stackBlitz导入的问题。

更新： …

我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮.我尝试了一些调整,但目前当我向下滚动按钮时,它并没有停留在它应该是的位置.

在滚动之前它看起来像下面:

滚动后:

模板中元素的HTML:

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

CSS应用于元素除了任何默认值:

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}

1. 我怎样才能解决这个问题？
2. 另外有任何内置的Angular材料可以做我想要的吗？

更新:

我的主要组件的模板:

<toolbar></toolbar>
<side-nav></side-nav>

Side Nav的模板:

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

和它的CSS:

#sidenav-container { // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;
}

然后在路由器插座添加的组件内部将出现FAB元素.

Notes-list组件的模板(图像中显示的模板):

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

现场演示