Angular Dart 组件事件答案

【问题标题】：Angular Dart component eventsAngular Dart 组件事件
【发布时间】：2014-11-28 06:52:00
【问题描述】：

我正在尝试将自定义事件从组件传递到其父组件/控制器

确认.html

<div class="comfirm-component">
    <content></content>
    <a href="#" ng-click="ctrl.yes()">Yes</a>
    <a href="#" ng-click="ctrl.no()">No</a>
</div>

确认.dart

@Component(
    selector: "confirm-component",
    templateUrl: 'confirm.html',
    useShadowDom: false,
    publishAs: "ctrl"
)
class ConfirmComponent {
    void yes(){
        print('yes');
        // Fire confirm-yes event
    }

    void no(){
        print('no');
        // Fire confirm-no event
    }
}

有这样的吗？：

<confirm-component on-confirm-yes="doSomething()" on-confirm-no="doSomethingElse()">
    Do you want to delete
</confirm-component>

我可以使用普通的 StreamController，但我必须用代码连接我的组件。

confirmComponent.onConfirmYes.listen()
confirmComponent.onConfirmNo.listen()

我还发现了这个： How to communicate between Angular DART controllers

还有这个： angulardart components - dispatch custom event

在这两个方面都提到了 scope.emit。但是我没有找到将它与组件而不是控制器一起使用的方法。是否有 vor angular.dart v0.14.0 的完整示例？

scope.emit 是我要搜索的东西吗？

【问题讨论】：

标签： events scope dart components angular-dart

【解决方案1】：

这应该是一样的，只是在构造函数中添加一个范围参数，以便组件获得注入的范围。

Angular 0.14.0 https://github.com/angular/angular.dart/commit/181f01448555c475869505491159045904e5dc89有一个相关的变化

我还没有尝试过。从描述看你需要实现ScopeAware

@Component(...)
class MyComponent implements ScopeAware {
  Watch watch;
  MyComponent(Dependency myDep) {
    // It is an error to add a Scope / RootScope argument to the ctor and will result in a DI
    // circular dependency error - the scope is never accessible in the class constructor
  }

  void set scope(Scope scope) {
     // with this scope you should be able to use emit
     // This setter gets called to initialize the scope
     watch = scope.rootScope.watch("expression", (v, p) => ...);
  }
}

【讨论】：

【解决方案2】：

根据 Günter 的回答，我构建了这个工作示例：

@Component(
    selector: "confirm-component",
    templateUrl: 'component/confirm.html',
    useShadowDom: false,
    publishAs: "ctrl"
)

class ConfirmComponent implements ScopeAware {
    Scope scope;

    void yes(){
        scope.emit('confirm', 'yes');
    }

    void no(){
        scope.emit('confirm', 'no');
    }
}

@Component(
    selector: "my-component",
    templateUrl: 'component/my.html',
    useShadowDom: false,
    publishAs: "ctrl"
)
class MyComponent implements ScopeAware{

    void set scope(Scope scope) {
        Stream mystream = scope.on('confirm');
        mystream.listen((event){
            print('confirmed: ' + event.data);
        });
    }
}

【讨论】：

你可以简单地写scope.on('confirm').listen(...)。如果你想取消订阅，你应该存储从listen返回的StreamSubscription，你可以调用cancel()来取消订阅。