Angular 材料可重复使用 mat-chip-list 与 mat-autocomplete

Question

我试图通过创建一个可重复使用的芯片列表表单控件来做与这个问题类似的事情，但是我还需要在芯片列表中添加一个自动完成功能。 问题是自动完成选项列表重叠并且没有扩展到文本框的全宽。 当我没有将芯片列表放入可重复使用的组件中时，自动完成不会像预期的那样重叠。 如何防止重叠？

代码的分叉版本可以在这里找到。

Answer 1

将焦点事件添加到输入：

(focus)="addGoodStyleToMatAuto()"

将此 function 添加到 ts：

addGoodStyleToMatAuto(): void {
    setTimeout(() => {
      try {
        const matAuto = document.getElementsByClassName(
          'mat-autocomplete-panel'
        )[0];
        matAuto.parentElement.classList.add('auto-class');
      } catch {}
    }, 10);
  }

将此 class 添加到 style.css：

.auto-class {
  width: 100% !important;
  top: 120px !important;
  left: 0 !important;
  transition: 0.2s;
}

代码的分叉版本可以在这里找到。

Answer 2

我能够通过在自动完成输入上使用matAutocompleteConnectedTo属性来解决这个问题，我将它作为输入传递给组件。 我将自动完成功能连接到<mat-form-field>元素。 但是， <mat-form-field>在底部有填充，所以我在自动完成中添加了一个自定义 class 并带有负边距以抵消填充。

styles.css：

.email-autocomplete {
  margin-top: -1.34375em;
}

在这里分叉堆栈闪电战