相关疑难解决方法(0)

有没有办法在控制台中访问Angular2特定组件特定数据,以进行调试？

就像Angular1能够在控制台中访问其组件值一样.

我有一个DisplayComponent,我想在浏览器/开发人员的控制台中看到它的数据.我怎么能看到它？

Angular2分步指南示例:

function DisplayComponent() {
  this.myName = "Alice";
}

我如何this.myName在浏览器/开发人员的控制台中看到？

*请注意,这是关于Angular 2而不是Angular 1的问题.AngularJS(Angular 1)的建议解决方案不起作用.

已经回答了如何从Angular 2组件中获取DOM元素:( ComponentRef.location.nativeElementComponentRef.location提供了可以直接访问DOM的ElementRef).

但是如何做相反的事情,即当我只有原生DOM对象时获取对ComponentRef的引用？

当我尝试使用interact.js拖放Angular 2组件时就是这种情况.该库使用回调函数来通知拖动哪个元素,以及我们尝试删除哪个元素.event提供了一个对象,我发现的唯一有用信息是DOM元素(target属性).

例:

interact('my-component-tag').draggable({
    // ...
    onstart: function (event:any) {
        var dom = event.target; // ref to the <my-component-tag> tag
        // How to find the Angular ComponentRef object here?
    }
    // ...
}).dropzone({
    // ...
    ondragenter: function (event:any) {
        var targetDom = event.relatedTarget; // targeted <my-component-tag> tag
        // Same question here,
        // to identify where we want to insert the dragged element.
    }
    // ...
});

这里的人物

你可以检查处理程序src/Interactjs.ts.打开控制台以查看关联的日志并将组件拖放到另一个组件上.我有DOM的元素信息,但我想要Angular组件,比如说访问 …