Question

我有一个Angular 4应用程序和一个组件，可以动态生成一些标记。我需要将此组件的方法绑定到此标记中的某个元素。我找到的唯一方法是使用onclick属性生成此元素。所以现在我的组件的构造函数看起来像这样：

constructor(private _zone: NgZone) { 
    window['Component'] = {
      myMethod: this.myMethod.bind(this),
      zone: _zone
    }
}

...我生成的标记的样子看起来像那样：

<button onclick="window.Component.myMethod()">I was generated dynamically after Angular compilation, so you can't use '(click)="method(params)"' on me! Haha!</button>

它有效！几乎......单击按钮后，我需要在window上触发一些事件（例如焦点或模糊），然后才运行我的方法。请任何人帮助。

Answer 1

看起来问题是当我在Angular区域之外运行方法时，UI douesn不刷新。所以我这样做了：

(<any>window).myMethod = (params) => this._zone.run(
    () => {
        this.myMethod(params);
    });

不知道这个解决方案有多好，但它运作正常。

UPD：哎呀，不行。第一次单击按钮时，该方法不会运行，之后一切正常。

Answer 2

你必须使用：Private Sub Worksheet_PivotTableUpdate2(ByVal Target As PivotTable) Dim ptMain As PivotTable Dim pfDimension As PivotField Dim i As Long On Error GoTo Errorhandler Set ptMain = Worksheets("Multidimensional Graph").PivotTables("Multidimensional") For Each pfDimension In ptMain.RowFields pfDimension.Orientation = xlHidden Next ptMain.PivotFields([ChoiceDimensions]).Orientation = xlRowField Exit Sub Errorhandler: Debug.Print Now(), Err.Description End Sub

我附上了示例来说明你在哪里有按钮的角度和事件绑定内部组件。正如我的样本所示，不要忘记解开你的事件onDestroy。

this.zone.runOutsideAngular

https://stackblitz.com/edit/angular-xtkw3z?file=app%2Fapp.component.ts

更新1：

我已经创建了专门用于绑定按钮上的click事件的自定义指令。

我删除了DOMSanitizer，因为我们自动添加了Event.stopPropagation（）。所以如果字符串是安全的，你必须自己控制。

this.zone.runOutsideAngular(() => {
  document.querySelector('#btn').addEventListener('click', () => {
    this.foo();
  });      
});

这里的源代码： https://stackblitz.com/edit/angular-cua3is?file=app/app.component.ts

如何将组件方法绑定到Angular外部的按钮'onclick'？

2 个答案: