Dart-JS 互操作：在 Dartium 中 运行 时未加载 JS 对象

Question

当我 运行 Chrome 中的代码（转译为 JS）时，对象在页面加载时可用。当我 运行 Chromium 中的代码（原生 Dart + JS）时出现问题，未加载对象，在这种情况下，为 dateObject['length'].

打印 0

date_picker.dart

part of myproject.common.ui;

@Component(
    selector: 'date_picker',
    templateUrl: "date_picker.html",
    useShadowDom: false
)
class DatePickerComponent{


    DatePickerComponent() {
        new Future(() {

            var dateObject = context.callMethod("jQuery", ['#date_picker']);
            print(dateObject['length']);
            var dateChanged = dateObject.callMethod("datetimepicker", [new JsObject.jsify({"format": 'MM/DD/YYYY'})]);
            dateChanged.callMethod('on', ['dp.change']);

        });
    }
}

date_picker.html

    <div class="form-group">
        <div class='input-group date' id='date_picker'>
            <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
        </div>
    </div>

使用评论中的答案添加修改后的date_picker.dart

part of my_project.common.ui;

@Component(
    selector: 'date_picker',
    templateUrl: "date_picker.html",
    useShadowDom: false
)
@Injectable()
class DatePickerComponent implements ShadowRootAware{

void onShadowRoot(_){


    new Future((){

        var dateObject = context.callMethod("jQuery", ['#date_picker']);
        var dateChanged = dateObject.callMethod("datetimepicker", [new JsObject.jsify({"format": 'MM/DD/YYYY'})]);
        dateChanged.callMethod('on', ['dp.change']);

    });
}
    DatePickerComponent();
}

Answer 1

假设您使用的是 angular1，您可以实现 ShadowRootAware 并将您的代码放入 void onShadowRoot(_)（即使您有 useShadowDom: false 也应该调用此方法）