angular - Angular:可以从特定组件查询所有 DOM 的元素吗?
问题描述
使用下面的 DOM 片段:
<ng-app>
<ng-comp1></ng-comp1>
<ng-comp2>
<ng-comp3></ng-comp3>
</ng-comp2>
<ng-comp1></ng-comp1>
</ng-app>
我想ng-comp3
列出 DOM 文档中的所有组件ng-comp1
。有办法吗?
ViewChildren
仅列出ng-comp3
.
document.querySelector
列出 DOM 元素,而不是组件。
解决方案
简短的回答是“不,您不能直接列出它们”。
另一方面,您可以做的是在您的组件中ng-app
注入并通过.ng-comp3
ng-comp1
ng-app
@Component({
selector: 'inner-hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class InnerHelloComponent implements AfterViewInit {
@Input() name: string;
constructor(@Inject(forwardRef(() => AppComponent)) private app: AppComponent) {
console.log(app.name);
}
ngAfterViewInit() {
// Here you will be able to access your ViewChild
}
}
不要忘记ViewChild
and在被解雇ViewChildren
之前不会被填充ngAfterViewInit
正如可能已经注意到的那样,这个想法是ng-comp1
在ng-app
组件中查询,将其存储在公共变量中并从ng-comp3
. 与我name
在示例中访问属性的方式相同
推荐阅读
- git - 在 Windows 8 上为 Jenkins 启用 ssh-agent 作为服务
- mysql - 如何将长段落放在mysql的列中
- flask - 为模型选择过滤的嵌套外键以在烧瓶中编组
- r - 在 ggplot2 barplot 上手动绘制子组之间的显着性关系
- docker - 使用 pass 在运行的 docker 容器上执行 SSH
- ocaml - coq 8.11.0 与 ocaml 4.10 不兼容?
- javascript - 如何将实例化重写为函数?
- javascript - 选择框边框颜色
- c# - 在 GeckoFX 中获取视频时长
- python - 如何编写一个函数来检查文件中的元素是否重复?