无法在打字稿的 JointJS 元素中添加 HTML

Question

我正在将 HTML 添加到打字稿中 JointJS 自定义元素内的代码中。 我正在关注本教程。 当我在打字稿ngOnInit()使用相同的代码时。 我看不到纸上的 HTML 元素。 我可以通过将不透明度设置为 1 来验证这些矩形框是否存在，但 HTML 文本和样式不存在。

代码：

joint.shapes['html'] = {};
    joint.shapes['html'].Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });

joint.shapes['html'].ElementView = joint.dia.ElementView.extend({

        template: [
            '<div style="position: absolute; background: #3498DB;z-index: 2000;">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>one</option><option>two</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),

        initialize(): void {
            console.log("Init function called") //THIS LINE IS NEVER PRINTED ON THE CONSOLE
            _.bindAll(this, 'updateBox');
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);

            this.$box = $(_.template(this.template)());
            // Prevent paper from handling pointerdown.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // This is an example of reacting on the input change and storing the input data in the cell model.
            this.$box.find('input').on('change', _.bind(function(evt) {
              this.model.set('input', $(evt.target).val());
            }, this));
            this.$box.find('select').on('change', _.bind(function(evt) {
              this.model.set('select', $(evt.target).val());
            }, this));
            this.$box.find('select').val(this.model.get('select'));
            this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
            // Update the box position whenever the underlying model changes.
            this.model.on('change', this.updateBox, this);
            // Remove the box when the model gets removed from the graph.
            this.model.on('remove', this.removeBox, this);
            console.log("************Init function processed"+this)

            this.updateBox();
        },
        render: function() {
            joint.dia.ElementView.prototype.render.apply(this, arguments);
            this.paper.$el.prepend(this.$box);
            this.updateBox();
            return this;
        },
        updateBox: function() {
          console.log("****This is the time")
          // Set the position and dimension of the box so that it covers the JointJS element.
          var bbox = this.model.getBBox();
          // Example of updating the HTML with a data stored in the cell model.
          this.$box.find('label').text(this.model.get('label'));
          this.$box.find('span').text(this.model.get('select'));
          this.$box.css({
              width: bbox.width,
              height: bbox.height,
              left: bbox.x,
              top: bbox.y,
              transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
          });
      },

      removeBox: function(evt) {
        this.$box.remove();
      }
    });

我在ElementView的 initialize 方法中添加了一条控制台日志消息，但它从未打印过。 代码与教程中的代码相同， joint.shapes.html.Element将joint.shapes['html'].Element更改为joint.shapes['html'].Element因为joint.shapes['html'].Element不支持前者。

任何人都可以建议我需要进行哪些更改才能使代码与打字稿兼容？

Answer 1

我们遇到了同样的问题，最后我们通过在创建文件中添加一个参数“cellViewNamespace”来解决它。 希望对你有帮助。

return new joint.dia.Paper(Object.assign(parms, {
        model: this.graph,
        gridSize: 65,
        drawGrid: { name: 'mesh', args: { color: '#DDDDDD' }},
        linkConnectionPoint: this.linkConnectionPoint,
        interactive: true,
        ***cellViewNamespace: joint.shapes,***
        background: { color: '#F7F8FC' }
    }));