Ich verwende CDK Drag & Drop in meinem Projekt. Innerhalb der Methode: cdkDragConstrainPosition berechne ich einen "Snap" an Spalten in meiner Komponente. Wenn diese Methode aufgerufen wird, kann ich auf keine meiner Variablen auf Komponentenebene zugreifen. Sie sind alle undefiniert. Wenn ich das mache console.log(this)
, gibt es DragRef
so den Bereich aus, der auf die Komponente eingestellt ist. Wie kann ich innerhalb dieser Funktion auf meine Variablen auf Komponentenebene zugreifen?
<div cdkDrag cdkDragBoundary=".drag-boundary" [cdkDragData]="{'colwidth': colWidth}" [cdkDragConstrainPosition]="computeDragRenderPos" [style.width.px]="colWidth" style="position: absolute; transform: translate3d(80px, 177px, 0px); background-color: beige; top: 0; left: 0; height: 42px; overflow: hidden">
<div>Chris's awesome presentation. Doing fun stuff with science</div>
</div>
Relevanter Komponentencode:
computeDragRenderPos(pos, dragRef, clientRect) {
console.log(this);
console.log(this.myComponentVariable); //this is undefined
}
Dies liegt daran , dass cdkDragConstrainPosition
die Funktion als Parameter und nicht als Wert akzeptiert wird. Die Funktion wird also im Bereich der Anweisung aufgerufen, die sie als Eingabe verwendet, und ist daher this
nicht Ihre Komponente. Sie können Ihre Funktion mithilfe der Pfeilfunktion definieren , um den Bereich beizubehalten. Versuchen Sie so etwas (von oben nach unten):
computeDragRenderPos = (userPointerPosition: Point, dragRef: DragRef,
dimensions: ClientRect): Point => {
//console.log(this.myComponentVariable);
}
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen