问题描述

我有这样一个 Angular Component，模板文件如下：
@Component({
selector: ‘example-app’,
template: `
<pane id=“1” *ngIf=“shouldShow”>
<pane id=“2” *ngIf="!shouldShow">

<button (click)="toggle()">Toggle</button>
<div id="panel 1?" #pane999>1</div>
<div id="panel 2?" pane>2</div>
<div>Selected: {{selectedPane}}</div>

`,
})


在其 Component 实现里，我期望通过 `@ViewChild`，在运行时拿到 id 为 `panel 1?` 的 div 元素的实例。```typescript
export class ViewChildComp {constructor(public changeDetectorRef: ChangeDetectorRef){}@ViewChild("panel 1?")set panethis(v) {//setTimeout(()=> this.selectedPane = v.id, 0);this.selectedPane = v.id;this.changeDetectorRef.detectChanges();//Promise.resolve().then(() => this.selectedPane = v.id);}

然而运行时没有得到期望的结果，报错：

ERROR TypeError: Cannot read properties of undefined (reading ‘id’)
at ViewChildComp.set (ng-content.component.ts:57:27)
at ViewChildComp_Query (template.html:3:5)
at executeViewQueryFn (core.js:8758:5)
at refreshView (core.js:7437:13)
at refreshComponent (core.js:8527:13)
at refreshChildComponents (core.js:7186:9)
at refreshView (core.js:7430:13)
at refreshComponent (core.js:8527:13)
at refreshChildComponents (core.js:7186:9)
at refreshView (core.js:7430:13)

问题分析

我们点击上图高亮的 template.html 调用栈：

来到我们自己 Component 的模板文件，因为这是一个内联到 Component 里的模板，所以显示为 template.html ：

通过单步调试，能发现在 refreshView 里，执行 view query 的入口逻辑：

function executeViewQueryFn(flags, viewQueryFn, component) {ngDevMode && assertDefined(viewQueryFn, 'View queries function to execute must be defined.');setCurrentQueryIndex(0);viewQueryFn(flags, component);
}

根据关键字 view query 查询 Angular 官网，发现在 view query 里使用 id 选择器的正确语法，并不是直接查询 HTML 元素的 id 属性，而是需要在 HTML 元素或者 ng-template 里使用符号 # 指定一个 id，然后将这个 id 传入 @ViewChild：

修改之后的运行效果：

总结

view query 在父 Component 需要访问其子 Component 的场景下特别有用。

假设有一个 alert Component：

@Component({selector: 'alert',template: `<h1 (click)="alert()">{{type}}</h1>`,
})
export class AlertComponent {@Input() type: string = "success";alert() {console.log("alert");}
}

在我们的父 Component 里，可以定义 AlertComponent 的多个实例：

@Component({selector: 'my-app',template: `<alert></alert><alert type="danger"></alert><alert type="info"></alert>`,
})
export class App {@ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>ngAfterViewInit() {this.alerts.forEach(alertInstance => console.log(alertInstance));}
}

我们可以使用 @ViewChildren 装饰器从宿主视图中抓取元素。
@ViewChildren 装饰器支持指令或组件类型作为参数，或模板变量的名称。
当参数是组件/指令时，返回值将是组件/指令实例。

上面例子的 console.log 语句会打印 AlertComponent 的实例：

关于 Angular view Query 的 id 选择器问题的单步调试相关推荐

Angular 内容投影 content projection 关于选择器问题的单步调试
问题描述我定义了一个能够允许消费者 Component 将其自定义内容通过 content projection 投射进来的 Component: import { Component } from ...
html选择器_HTML的id选择器类选择器
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式二.id选择器 1. ...
jquery在thymeleaf循环的按钮元素中不能直接用id选择器
html页面中作为分页页码的按钮元素是写在thymeleaf定义的循环里的,代码如下: <li th:each="p:${page.navigatepageNums}"> ...
id jquery选择器开头_HTML的id选择器类选择器
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式二.id选择器 1. ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
Id选择器和Class选择器
http://www.runoob.com/css/css-id-class.html http://www.w3school.com.cn/css/css_syntax_id_selector.as ...
007_CSS ID选择器
1. ID选择器允许以一种独立于文档元素的方式来指定样式. 2. 语法 2.1. 首先, ID选择器前面有一个#号, 也称为棋盘号或井号. 2.2. 请看下面的规则: *#intro {font-we ...
CSS基本选择器（元素选择器、类选择器、id选择器）
一.元素选择器 <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...

关于 Angular view Query 的 id 选择器问题的单步调试

问题描述

问题分析

总结

关于 Angular view Query 的 id 选择器问题的单步调试相关推荐

最新文章

热门文章