扩展自适应卡片输入元素时如何覆盖渲染标签（JS）

Question

我们正在使用 Adaptive Cards JS SDK 在 Angular 中呈现自适应卡片。我们想让自适应卡片将元素呈现为 Angular Material 设计组件。为此，我关注 Extensibility guidelines for Custom Inputs.

这里我看到我们应该覆盖protected updateInputControlAriaLabelledBy()来正确设置aria-labelledby属性，但实际上我想要的是依赖Angular Material Design Inputs提供的默认标签。

有没有办法阻止 SDK 将标签呈现为卡片中的单独元素？

查看SDK源码： 也许我已经通过指出我确实找到了 this code 来回答我自己的问题，它似乎总是将此标签元素创建为实际输入之上的单独元素。

解决方法？： 到目前为止我发现的唯一解决方法是向我的自定义输入添加一个新的属性：inlineLabel，然后在设置属性时，no label 提供，我可以使用它来呈现 Material 输入内的标签。但是我当然不喜欢这样，因为实际上我想坚持标准，并且能够覆盖 label.

的行为

Answer 1

没有明确支持覆盖标签的渲染，我们应该认真考虑添加这样的支持。

不过有一个变通方法，尽管它是一种 hack，而且我还没有明确测试过它。在您的自定义输入中：

声明私有 _labelCopy?: string 字段
重写 overrideInternalRender() 方法，如下所示
在您的 internalRender 实现中，使用 _labelCopy 的值（因为在它被调用时，label 将是未定义的）

private _labelCopy?: string;

protected overrideInternalRender(): HTMLElement | undefined {
    this._labelCopy = this.label;

    // Reset the label property temporarily so that
    // overrideInternalRender doesn't render a label
    this.label = undefined;

    // The base overrideInternalRender implementation will
    // call internalRender, which can then render the label
    // using the value of the _labelCopy field
    let renderedElement = super.overrideInternalRender();

    // Restore the label property
    this.label = this._labelCopy;

    return renderedElement;
}

如果这解决了您的问题，请告诉我。

扩展自适应卡片输入元素时如何覆盖渲染标签（JS）

How can I override rendering labels when extending Input Elements for Adaptive Cards (JS)

javascript

typescript

adaptive-cards