angular - 获取组件元素引用而不是模板中的组件引用

Question

我需要获取 kendo-maskedtextbox 容器元素 ref，以将悬停组件正确锚定到它。但是，我在使用#cprNrAnchor 时得到了组件实例，有没有办法做到这一点，或者我不走运看到它在第三方组件中是私有的。

<div class="form-group" fxLayout="row" fxLayoutAlign="start center">
                <label fxFlex="150px" class="form-control-label">CPR-nr.</label>
                <kendo-maskedtextbox #cprNrAnchor mask="000000-0000" class="form-control" fxFlexOffset="20px" formControlName="cprNr"></kendo-maskedtextbox>
                <control-messages [anchor]="cprNrAnchor" [control]="personinfoForm.get('cprNr')"></control-messages>
            </div>

Answer 1

您可以使用 MaskedTextBox 的输入字段作为锚点，例如：

<form #templateForm="ngForm" novalidate>
        <p>Enter valid postcode (A9 9AA)</p>
        <kendo-maskedtextbox #mtb
            name="value1"
            [(ngModel)]="value"
            [mask]="mask"
            [maskValidation]="maskValidation"
        ></kendo-maskedtextbox>
        <button [disabled]="!templateForm.valid" type="submit" class="k-button">Submit</button>
    </form>
    <kendo-popup 
      [popupClass]="'content popup'" 
      [anchor]="mtb.input" 
      (anchorViewportLeave)="show = false" 
      *ngIf="!templateForm.valid">
        Invalid input content
    </kendo-popup>

样品 1

...或通过 AfterViewInit 处理程序中的 ViewChild 引用获取对容器的引用，并将其设置为弹出窗口的锚点，例如：

<kendo-maskedtextbox #mtb...

@ViewChild('mtb') private mtb;
//...    
ngAfterViewInit() {
  this.mtbWrapper = this.mtb.input.nativeElement.parentElement;
}
<kendo-popup 
      [popupClass]="'content popup'" 
      [anchor]="mtbWrapper"

样品 2