简体   繁体   English

从Dart中的嵌套聚合物元素捕获异常

[英]Catch exception from nested polymer element in Dart

I can't figure out how to catch an exception thrown by a nested Element. 我不知道如何捕获嵌套元素引发的异常。

What I want is something like: 我想要的是这样的:

<error-handler>
    <hard-worker></hard-worker>
</error-handler>

The idea is, for example, to make a REST-Request in hard-worker. 例如,该想法是在勤奋的工作中发出REST请求。 If hard-worker gets an error from the REST-Server, of course, it makes its own error handling. 当然,如果努力工作的人从REST服务器中获取错误,它将进行自己的错误处理。 But finally it has to display an error message somewhere / somehow. 但最后它必须在某处/以某种方式显示错误消息。 error-handler is thought to be the one who shows the error (Exception) to the user. 错误处理程序被认为是向用户显示错误(异常)的人。 error-handler should be changeable. 错误处理程序应该是可变的。 It could be for example error-handler-log-message or error-handler-show-popup. 例如,可能是错误处理程序日志消息或错误处理程序显示弹出窗口。

That won't work as the code in <hard-worker> is not invoked from <error-handler> . 这不会起作用,因为<hard-worker>的代码没有从<error-handler>调用。

It would be helpful if you provided more information about what kind of errors you want to handle in <error-handler> . 如果您提供了有关要在<error-handler>处理什么样的错误的更多信息,将很有帮助。

If you have code that is error-prone you should it encapsulate with a try-catch hand handle the error as locally to the cause as possible. 如果您的代码易于出错,则应使用try-catch手将其封装起来,以尽可能在本地解决错误。

EDIT (after comment) 编辑 (评论后)

That makes more sense. 这更有意义。 But do you really want to have such an error handler for one service? 但是,您真的要为一种服务使用这样的错误处理程序吗? I would rather have such an error handler for the page (maybe different for visible controls like form text input) 我宁愿为页面设置这样的错误处理程序(对于表单文本输入等可见控件可能有所不同)

I suggest you use something like an Eventbus (see an example on the answer to this question How to access angular.dart component´s attribute or method ) to send Error events and let the <error-handler> listen to such events. 我建议您使用Eventbus类的Eventbus (请参见有关如何访问angular.dart组件的属性或方法的问题的示例)来发送Error事件,并让<error-handler>侦听此类事件。 The events can contain additional data in the details property like message, severity, ... 事件可以在details属性中包含其他数据,例如message,severity,...

I updated my Polymer-Sample on GitHub. 我在GitHub上更新了Polymer-Sample。 It shows the two discussed approaches: Eventbus-Based (was already there) and the new DOM-Event approach. 它显示了两种讨论的方法:基于Eventbus的方法(已经存在)和新的DOM-Event方法。 (The one I prefer - much cleaner) (我更喜欢的那个-更清洁)

Working sample (Chrome) 工作样本(Chrome浏览器)
https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/index.html https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/index.html

The code: 编码:
https://github.com/MikeMitterer/DART-Sample-PolymerHelloWorld/tree/master/web https://github.com/MikeMitterer/DART-Sample-PolymerHelloWorld/tree/master/web

Some details about what I did: 关于我所做的一些细节:
index.html 的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="hello-world/hello-world.html">
    <link rel="import" href="event-handler/event-handler.html">
    <link rel="import" href="stopwatch/stopwatch.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
<body>

    <h1>Hi first world!</h1>
    <!-- event-handler should show some events coming in from hello-world -->
    <event-handler>
        <hello-world></hello-world>
    </event-handler>

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

hello-world.html 你好,world.html
Element that fires an event if you click the "Fire an event"-button. 如果单击“触发事件”按钮,则触发事件的元素。 This could also be an error-message... 这也可能是错误消息...

<!DOCTYPE html>
<polymer-element name="hello-world">
    <template>
        <button on-click="{{increment}}">Click Me</button>
        <button on-click="{{fireevent}}">Fire an event (received by event-handler)</button>

        <p>Hello from inside a custom element! Clicks: {{count}}</p>
    </template>
    <script type="application/dart" src="hello-world.dart"></script>
</polymer-element>

hello-world.dart 你好,world.dart

import 'package:polymer/polymer.dart';
import 'package:event_bus/event_bus.dart';
import 'package:PolymerHelloWorld/globaleventbus.dart';
import 'dart:html';
import 'dart:math';
import 'package:json/json.dart' as JSON;

@CustomTag('hello-world')
class HelloWorldElement extends PolymerElement {
    final EventBus _eventbus = new GlobalEventBus();

    @observable int count = 0;

    HelloWorldElement.created() : super.created();

    void increment(Event e, var detail, Node target) {
        count += 1;
        _eventbus.fire(GlobalEventBus.basicClickEvent,"Test");
    }

    void fireevent(Event e, var detail, Node target) {
        final Random random = new Random();
        final Map json = { 'response' : 'Hi, this is a message', 'random' : random.nextInt(100)};

        // Fires a JSON-Message 
        fire("hello-event",detail: JSON.stringify(json));
    }
}

event-handler.html Template that receives the "hello-event" event-handler.html接收“你好事件”的模板

<!DOCTYPE html>
<polymer-element name="event-handler" on-hello-event="{{handleHelloEvent}}">
    <template>
        <style>
            .error { color: red; }
        </style>
        <p class="error">EventHandler (Shows hello-world events!) Message: {{response}}, Random number: {{randomnumber}}</p>
        <content></content>
    </template>
    <script type="application/dart" src="event-handler.dart"></script>
</polymer-element>

event-handler.dart Implements the handleHelloEvent defined in the according template event- handler.dart实现在相应模板中定义的handleHelloEvent

import 'package:polymer/polymer.dart';
import 'package:json/json.dart' as JSON;

@CustomTag('event-handler')
class EventHandler  extends PolymerElement {

    @observable String response = "";
    @observable int randomnumber = 0;

    EventHandler.created() : super.created();

    void handleHelloEvent(Event e, var detail, Node target) {
        final Map json = JSON.parse(detail);

        response = json['response'];
        randomnumber = json['random'];

        // Log to console 
        print("Received event! $detail");
    }
}

That's it - if you know how it works - as easy as pie! 就这样-如果您知道它的工作原理-就像馅饼一样容易!

Instead of 代替

<polymer-element name="event-handler" on-hello-event="{{handleHelloEvent}}">

I think you can use (but didn't try): 我认为您可以使用(但没有尝试):

<event-handler>
  <hello-world on-hello-event="{{handleHelloEvent}}"></hello-world>
</event-handler>

Your component does not need to know which method has to be called ! 您的组件无需知道必须调用哪种方法!

Also you don't need to stringify your map: detail accepts any kind of Object 同样,您也不需要对地图进行分类:细节接受任何对象

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM