angular - 如何获取 Angular 共享组件的节点索引?
问题描述
我有一个共享组件,我将使用它https://stackblitz.com/edit/angular-ivy-nveufn
我不会用循环克隆组件,我会根据需要将其粘贴到 html 文件中。有没有办法让共享组件知道它是哪个节点的索引号,而无需在其父容器中进行循环?
解决方案
您应该可以通过使用模板引用变量和ViewChild访问本机元素来做到这一点。从那里您可以检查子节点的索引以获取位置。
<div #thing>
<div>hello</div>
<div>world</div>
<div>2.0</div>
</div>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myproject';
@ViewChild('thing',{ static: true }) thing: ElementRef;
ngAfterContentInit(): void {
let a = this.thing.nativeElement.childNodes;
}
}
推荐阅读
- c# - 将 neo4j 结果返回到 C# 对象
- python - 我需要使用 matplotlib 或 seaborn 绘制分组数据
- flutter - 你能以编程方式将 Draggable 放在 DragTarget 中吗?
- javascript - 带有来自多个 Ajax 请求的大型数据集的 Jquery DataTable
- c# - 映射 1-0..1 与没有 FK 的导航属性的关系
- excel - 对数据进行排序以匹配列表列的顺序 - Excel VBA
- javascript - 刷新时图像不会停止闪烁
- ios - SwiftUI 试图从列表中删除对象但无法在不可变值上使用变异成员:是一个“让”常量
- python - 如何更快地从字典列表中的值中删除字符?
- javascript - Sapper $Session 更改直到页面重新加载才反映