问题

如何获取 `<mat-card>` 组件的坐标和大小？

也许这个问题很明显，但我在搜索了几天后还没有找到答案。也许访问 nativeElement 会有所帮助？

我有一个包含“添加”按钮和卡片列表的应用组件。

export class AppComponent {
  id = 0
  public cards = new Array<Card>()

  newCardClick() {
    // todo 获取所有卡片的大小和坐标
    if (this.cards.length>0)
      console.log(this.cards[0].element.nativeElement)
    this.cards.push(new Card(
      this.id, "Test"+this.id, "", (new Date()).toString(), { x: 10, y: 10+this.id++*85}
    ))
  }
}

卡片组件非常简单：

export class CardComponent implements AfterViewInit{
  @Input() card: Card

  constructor(private element:ElementRef) {
  }

  ngAfterViewInit() {
    this.card.element = this.element
  }
}

export class Card{
    constructor(
      public id: number,
      public header: String,
      public description: String,
      public time:String, 
      public position: Point) {
      }
      public element:ElementRef
    }

以上是您提供的代码的翻译部分。如果您需要任何进一步的帮助，请随时告诉我。

<details>
<summary>英文:</summary>

How to get coordinates and size of `&lt;mat-card&gt;` component?

Maybe question is obvious, but I haven&#39;t find answer for a couple of days searching web. Perhaps access to nativeElement will help?

I have app component with &quot;add&quot; button and list of cards.
```angular
export class AppComponent {
  id = 0
  public cards = new Array&lt;Card&gt;()

  newCardClick() {
    // todo get sizes and coordinates of all cards
    if (this.cards.length&gt;0)
      console.log(this.cards[0].element.nativeElement)
    this.cards.push(new Card(
      this.id, &quot;Test&quot;+this.id, &quot;&quot;, (new Date()).toString(), { x: 10, y: 10+this.id++*85}
    ))
  }
}

button {
    position: fixed;
    bottom:2em;
    right:2em;
}

<div class="main__div" #appElement>
  <app-card *ngFor="let card of cards" 
    [card]="card">
  </app-card>
</div>
<button mat-fab color="primary" 
    aria-label="New card" (click)="newCardClick()">
    <mat-icon>add</mat-icon>
</button>

Card component is very simple:

<mat-card #cardElement class="card" 
[cdkDragFreeDragPosition]="card.position"
cdkDrag>
    <mat-card-title>card.header</mat-card-title>
    <mat-card-subtitle>card.description</mat-card-subtitle>
</mat-card>

.mat-card {
    position: absolute;
    background-color: rgb(153, 237, 237);
}

export class CardComponent implements AfterViewInit{
  @Input() card: Card

  constructor(private element:ElementRef) {
  }

  ngAfterViewInit() {
    this.card.element = this.element
  }
}

export class Card{
    constructor(
      public id: number,
      public header: String,
      public description: String,
      public time:String, 
      public position: Point) {
      }
      public element:ElementRef
    }

Here is link to repository with this code.

答案1

得分: 1

以下是翻译好的部分：

要获取 Angular 中 <mat-card> 组件的坐标和大小，您可以使用 Angular 提供的 ElementRef 和 Renderer2。

需要在您的组件文件中导入依赖项：

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

在您的 HTML 中使用 @ViewChild：

<mat-card #cardElement>...</mat-card>

在组件类中使用它：

@Component({
  selector: 'app-componentName',
  templateUrl: 'componentName.component.html',
  styleUrls: ['componentName.component.css']
})
export class ComponentName {
  @ViewChild('cardElement', { static: true }) cardElement: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const cardRect = this.cardElement.nativeElement.getBoundingClientRect();
    const cardCoordinates = {
      top: cardRect.top,
      left: cardRect.left,
      width: cardRect.width,
      height: cardRect.height
    };

    console.log('Card coordinates:', cardCoordinates);
  }
}

希望这能帮助您获取坐标。

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

<mat-card #cardElement>...</mat-card>

@Component({
  selector: 'app-componentName',
  templateUrl: 'componentName.component.html',
  styleUrls: ['componentName.component.css']
})
export class ComponentName {
  @ViewChild('cardElement', { static: true }) cardElement: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const cardRect = this.cardElement.nativeElement.getBoundingClientRect();
    const cardCoordinates = {
      top: cardRect.top,
      left: cardRect.left,
      width: cardRect.width,
      height: cardRect.height
    };

    console.log('Card coordinates:', cardCoordinates);
  }
}