如何获取 `<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>

<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
    }

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);
  }
}