角度：TS2339：类型“ HTMLElement” /“ HTMLTextAreaElement” / etc / etc中不存在属性“ before”

Question

目标：如果用户在移动设备上，则需要在mat-card-title上方移动div（具有mat-select下拉菜单）。如果它们不在移动设备上，那么我想将其保留在原处（在mat-card-title的右边）

在非移动设备上的外观：

我尝试过的事情：

• 我尝试将ngIf以及以下条件用于基本条件， 但这会使HTML看起来很忙
• 我也考虑过媒体查询 但是示例总是显示某些东西在向下移动，而不是向上移动（如果是 嵌套在其他内容中）
• 所以我尝试使用香草 javascript，基于SO文章： JavaScript moving element in the DOM
• 我也看过jQuery解决方案，但我不想使用jQuery

问题： 我收到错误TS2339：类型“ HTMLElement”以及“ HTMLTextAreaElement”上的属性“ before”不存在

根据Property 'value' does not exist on type 'HTMLElement' for Textarea - Angular，我尝试了多种变型方式来铸造这些变量 但是它们都不起作用。

不确定从这里去哪里？

HTML ：

<div class="title-container">
    <mat-card-title id="signInTitle" class="text-center" i18n="@@MoVeSeLo_H1_1">
        Please Sign In
    </mat-card-title>
    <div id="langDropDown">
        <div *ngIf="(_lang_switch_controls)">
            <form [formGroup]="_siteForm">
                <mat-form-field class="language-field" appearance="outline">
                    <mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
                        <mat-option *ngFor="let language of languages" [value]="language.value">
                            {{language.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </form>
        </div>
    </div>
</div>

TypeScript ：

const signInTitle = <HTMLTextAreaElement>document.getElementById("signInTitle");
const langDropDown = <HTMLDivElement>document.getElementById("langDropDown");

var uagent = navigator.userAgent.toLowerCase();
    if (uagent.match(/iPad|iPhone|android/)) {
        signInTitle.before(langDropDown);
    }

Answer 1

HtmlElement等在打字稿dom lib中定义。

您至少需要为这些元素使用打字稿3.1.1来实现ChildNode接口（定义了before方法）。

如果您无法更新打字稿，则可以使用insertBefore甚至是Renderer2的角度服务来操作DOM元素