Question

我想在由angular和最终dom元素创建的组件之间创建映射。

以下是我认为自己需要这样做的故事：我的目标是创建2列布局之类的砌体。因为我想以一种特定的方式（基于其高度）订购图块，所以我需要在订购图块之前先获取DOM元素的高度。首先，我想根据每个图块所包含的信息来计算一个数字，但是当CSS由于每个图块中的动态字段而发生变化时，这种解决方案就不会成立。

所以我的第一步是查询每个元素的高度（使用以下命令在父组件上一次：

this.elementRef.nativeElements.querySelectorAll('.hero-card');

从那里，我得到一个带有DIV HTML元素的NodeList。我的问题是现在将这些元素映射回创建它们的组件。我可以介绍一个ID，但不知道如何将其添加到DOM属性中

这里是一个例子：

https://stackblitz.com/edit/angular-xzx335

Answer 1

正如@Chellappan在他的评论中所说，很难理解您要做什么。我认为以下内容将为您提供所需的东西：

将ViewChildren添加到'@angular/core'的导入中。

向您的AppComponent添加另一个属性： @ViewChildren(HeroDetailComponent) details;

将ngAfterViewInit方法更新为

  ngAfterViewInit() {
    const domElements: NodeList = this.results.nativeElement.querySelectorAll('.hero-card');
    console.log(domElements);
    console.log(this.details);
    console.log(this.details.first.el.nativeElement)
  }

您想获得的最后console.log是

如何在DOM元素和Angular之间创建映射

1 个答案: