Question

我有以下组件

@NgComponent(selector: 'foo',
  template: '<div>foo component</div>')
class FooComponent {
  void doSomething();
}

它的用法如下：

<html>
<head></head>
<body>
  <foo ng-click="ctrl.doSomething()"></foo> // This is wrong
</body>
</html>

如何在NgComponent中实际执行函数？

Answer 1

好问题

我想出了什么（可能不是你想要的）：

@NgController(
  selector: '[do-something]',
  publishAs: 'ctrl'
)
class DoSomething {

  FooComponent _foo;
  DoSomething(this._foo);

  void clickHandler(e) {
    _foo.doSomething();
  }
}

<foo do-something ng-click="ctrl.doSomething()"></foo>

Answer 2

这是一个糟糕的解决方案，但如果没有其他解决方案，那么你可以使用它。

编辑：我完全更新了这个解决方案。通过此示例，可以定义event组件识别的内容以及每个事件附加的功能。

HTML：

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Foo</title>
    <link rel="stylesheet" href="ok_comp.css">
  </head>
  <body>
    <foo click="test()" doubleclick="test2()"></foo>
    <foo click="test2()"></foo>

    <script type="application/dart" src="ok_comp.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

comp.dart：

import 'dart:html';
import 'package:angular/angular.dart';

@NgComponent(
 selector: 'foo',
 template: '<div>foo</div>'
)
class FooComp extends NgAttachAware {
  @NgAttr('click')
  var click;
  @NgAttr('doubleclick')
  var doubleclick;

  Element element;
  var func;

  FooComp(this.element){
  }

  attach(){
    attachFunc("click", click);
    attachFunc("doubleclick", doubleclick);
  }

  void attachFunc(String listener, String funcName){
    switch (funcName) {
      case 'test()':
        func = test;
        break;

      case 'test2()':
        func = test2;
        break;
    }

    switch (listener) {
      case 'click':
        element.onClick.listen(func);
        break;

      case 'doubleclick':
        element.onDoubleClick.listen(func);
        break;
    }
  }

  test(MouseEvent event){
    print ("test");
  }
  test2(MouseEvent event){
    print ("test2");
  }
}



class MyAppModule extends Module {
  MyAppModule() {
    type(FooComp);
  }
}
void main() {
  ngBootstrap(module: new MyAppModule());
}

Answer 3

您可以向组件添加事件侦听器。这是一个例子：

HTML：

<foo></foo>

comp.dart：

@NgComponent(selector: 'foo',
  template: '<div>foo component</div>')
class FooComponent {
  FooComponent(Element elem){
    elem.onClick.listen(doSomething);
  }

  void doSomething(MouseEvent event){
    print("click");
  }
}

Answer 4

这个问题一直困扰着我，我不得不再测试一下。在以下示例中，组件具有多个函数和多个内置ng指令。您可以通过组件的属性定义哪些功能与哪些ng-directive相关。

HTML：

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Foo</title>
    <link rel="stylesheet" href="ok_comp.css">
  </head>
  <body>
    <foo2 click="test" doubleclick="test2"></foo2>
    <foo2 click="test2"></foo2>

    <script type="application/dart" src="ok_comp.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

comp.dart：

import 'dart:html';
import 'package:angular/angular.dart';

@NgComponent(
    selector: 'foo2',
    template: '<div ng-click="cmp.ngClick()" ng-doubleclick="cmp.ngDoubleClick()">foo2</div>',
    publishAs: 'cmp'
)
class Foo2Comp extends NgAttachAware {
  @NgAttr('click')
  var strClick;
  @NgAttr('doubleclick')
  var strDoubleclick;

  var ngClick;
  var ngDoubleClick;

  Foo2Comp(){
  }

  attach(){
    ngClick = redirectFunc(strClick);
    ngDoubleClick = redirectFunc(strDoubleclick);
  }

   redirectFunc(String funcName){
    var ng;
    switch (funcName) {
      case 'test':
        ng = test;
        break;

      case 'test2':
        ng = test2;
        break;

      default:
        ng = empty;
        break;          
    }
    return ng;
  }

  empty(){
    print ("empty");
  }
  test(){
    print ("test");
  }
  test2(){
    print ("test2");
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    type(Foo2Comp);
  }
}
void main() {
  ngBootstrap(module: new MyAppModule());
}

如何从组件外部触发Component内部的功能？

4 个答案: