扩展自适应卡 (JS) 的输入元素时如何覆盖呈现标签

Question

我们正在使用 Adaptive Cards JS SDK 在 Angular 中呈现 Adaptive Cards。 我们想让 Adaptive Cards 将元素渲染为 Angular Material Design 组件。为此，我关注Extensibility guidelines for Custom Inputs。

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

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

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

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

Answer 1

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

虽然它是一种破解方法，但我还没有明确测试过它，但有一种解决方法。在您的自定义输入中：

• 声明一个私有的_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;
}

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