- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在寻找可用于通过 @ViewChild
和 @ContentChild
访问子组件/DOM 元素的有效选择器的完整列表。
假设我有一个 child HelloComponent
:
我知道我可以添加一个模板 #ref
并查询它,就像这样:
<hello #myHello></hello>
@ViewChild('myHello') myHello: HelloComponent;
或者我可以直接查找该组件(没有模板 #ref
):
@ViewChild(HelloComponent) myHello: HelloComponent;
在this issue ,有人提到可以使用以下选择器:
we are currently supporting a sub-set of CSS selectors:
* element selectors
* attribute selectors (including values)
* :not(...) pseudo-selector
* combination of the above (including ,)
但是当我在 Stackblitz 中测试这些以验证 (here's the link to that) 时,我实际上无法让前三个中的任何一个工作。 (检查控制台以查看 undefined
我无法工作的选择器类型。我不确定我是否对这些选择器做错了什么或者实际列表是否不同.)
那么,哪些选择器会起作用呢?此外,@ViewChild
、@ContentChild
、@ViewChildren
和 @ContentChildren
的列表是否相同?
最佳答案
首先,正如@JB Nizet 已经在评论中提到的 the comment in the issue是错误的:它与查询选择器无关,而是指 directive selector .
让我们来看看我们可以使用哪种选择器进行查询。
Angular 文档 states用于查询:
selector - the directive type or the name used for querying.
似乎任何人都应该清楚(1) 我们可以查询由@Component
或@Directive
装饰器装饰的任何类。
@Component({
selector: 'some-comp',
template: '...'
})
export class SomeComp {}
@Directive({
selector: '[someDir]'
})
export class SomeDir {}
@Component({
selector: 'host-comp',
template: `
<some-comp someDir></some-comp>
`
})
export class HostComp {
@ViewChild(SomeComp) someComp: SomeComp;
@ViewChild(SomeDir) someDir: SomeDir;
}
对我来说,这是令人困惑的描述。
原来这里的名字是(2)template reference variable的名字这是一个字符串:
@Component({
selector: 'host-comp',
template: `
<some-comp #someComp></some-comp>
`
})
export class HostComp {
@ViewChild('someComp') someComp: SomeComp;
}
我们可以到这里结束,但现在是查看 Angular 源代码并深入研究的时候了。
让我们看看the code Angular 编译器用来读取查询元数据:
private _queryVarBindings(selector: any): string[] { return selector.split(/\s*,\s*/); }
private _getQueryMetadata(q: Query, propertyName: string, typeOrFunc: Type|Function):
cpl.CompileQueryMetadata {
let selectors: cpl.CompileTokenMetadata[];
if (typeof q.selector === 'string') {
selectors =
this._queryVarBindings(q.selector).map(varName => this._getTokenMetadata(varName));
} else {
if (!q.selector) {
this._reportError(
syntaxError(
`Can't construct a query for the property ...`),
typeOrFunc);
selectors = [];
} else {
selectors = [this._getTokenMetadata(q.selector)];
}
}
从上面的代码我们可以得出结论:
如果选择器是一个字符串除以,
那么我们可以构造多个选择器。
另一方面,如果选择器不是字符串,那么我们只能得到一个选择器
编译器使用 this._getTokenMetadata
方法从传递的选择器中提取信息,但它与用于提取提供者元数据的方法相同 https://github.com/angular/angular/blob/4c089c1d931c0ea35591837706de205a75a61ccb/packages/compiler/src/metadata_resolver.ts#L1073-L1077
让我们应用从上面的代码中学到的知识。
我们(3) 可以通过使用除以,
的几个模板引用变量来查询多个值:
@Component({
selector: 'a',
template: '...'
})
export class A {}
@Component({
selector: 'b',
template: '...'
})
export class B {}
@Component({
selector: 'host-comp',
template: `
<a #a></a>
<b #b></b>
`
})
export class HostComp {
@ViewChildren('a, b') components;
ngAfterViewInit() {
console.log(this.components); // [A, B]
}
}
(4) 可以查询在组件或指令上定义的提供程序。(另请参阅@Ilia Volk 添加的示例)
@Component({
selector: 'a',
template: '...',
providers: [SomeService]
})
export class A {}
@Component({
selector: 'host-comp',
template: `<a></a>`
})
export class HostComp {
@ViewChild(SomeService) someService: SomeService;
}
由于字符串可以作为提供者的标记,我们可以(5) 查询通过字符串标记定义的多个提供者
@Component({
selector: 'a',
providers: [{ provide: 'tokenA', useValue: 'TokenAValue' }],
template: '...'
})
export class A { }
@Component({
selector: 'b',
providers: [{ provide: 'tokenB', useValue: 'TokenBValue' }],
template: '...'
})
export class B { }
@Component({
selector: 'host-comp',
template: `
<a #a></a>
<b #b></b>
`
})
export class HostComp {
@ViewChildren('tokenA, tokenB') stringTokenProviders;
ngAfterViewInit() {
console.log(this.stringTokenProviders); // ['TokenAValue', 'TokenBValue']
}
}
我们的下一站是核心包中的位置 angular returns us the value of particular query :
export function getQueryValue(
view: ViewData, nodeDef: NodeDef, queryValueType: QueryValueType): any {
if (queryValueType != null) {
// a match
switch (queryValueType) {
case QueryValueType.RenderElement:
return asElementData(view, nodeDef.nodeIndex).renderElement;
case QueryValueType.ElementRef:
return new ElementRef(asElementData(view, nodeDef.nodeIndex).renderElement);
case QueryValueType.TemplateRef:
return asElementData(view, nodeDef.nodeIndex).template;
case QueryValueType.ViewContainerRef:
return asElementData(view, nodeDef.nodeIndex).viewContainer;
case QueryValueType.Provider:
return asProviderData(view, nodeDef.nodeIndex).instance;
}
}
}
上面代码中的
RenderElement
是一些我们无法查询的内部标记。
ElementRef
可以通过模板引用变量或使用 read option 查询
(6) TemplateRef可以通过selector
查询:
@Component({
selector: 'host-comp',
template: `
<ng-template></ng-template>
`
})
export class HostComp {
@ViewChild(TemplateRef) template;
}
当然还有 ViewContainerRef
通过 read
选项。
Provider
可以通过使用 read
选项或通过选择器获得,正如我在这个答案中间所描述的那样。
关于angular - ViewChild 和 ContentChild 的所有有效选择器是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49162473/
我正在使用 Angular 5 并尝试创建某种动态组件。 我有一个简单的指令,MyColumnDef (使用选择器 [myColumnDef] )。它没有什么特别之处。我正在使用它: 父组件.html
我有一个 Angular 组件 app-b,它在组件 app-a 中使用,该组件 app-a 在 app-component 中使用。 app-component 在 app-a 中有一些内容,app
我正在尝试获取一个元素的 ElementRef,我在该元素上使用 Directive 作为组件的 ContentChild 添加了自定义属性,但在内容初始化后记录它时我得到了 undefined。你能
我需要从选项卡组件数组中监听事件。这些选项卡发出“onMinimized”但是我宁愿在一行代码中连接到这些事件而不是输入 (onMinimized)="hide"对于模板中的每个选项卡组件条目。有一个
如果我有自定义指令 ParentDirective和自定义组件 ChildComponent安排如下: ...然后我可以使用 @ContentChild在指令中引用组件: @ContentC
我有两个组件 FormComponent 和 Test1Component。 Test1Component 使用 ng-content 显示 FormComponent FormComponent.t
我有两个组件 FormComponent 和 Test1Component。 Test1Component 使用 ng-content 显示 FormComponent FormComponent.t
我正在使用 Angular6 构建一个选项卡组件,并且只需要根据事件选项卡显示一个组件。我怎样才能做到这一点? 我有这个结构 Mi contenido 1
是否可以在 ContentChild 中设置多个选择器? 例如,我正在寻找类似的解决方案: @ContentChild(Case1 | Case2) 如果 Case1 不可用,则能够获取 Case2
我正在尝试设置一个 Angular2 组件,自动聚焦通过内容投影插入的输入元素。 我使用的解决方案基于 this answer .我有一个额外的要求,即输入元素可能嵌套在另一个组件中。但是,我发现 C
我正在尝试像这样设计一个可扩展的组件: Summary Heading Details alternate-title 部分应该是可选的。当 myFlag = false 时,组件应仅
我一直在尝试使用 @ViewChild(CustomDirective) 或 @ContentChild(CustomDirective) 分别使用该集来访问我在元素上应用的自定义指令第一次在我的 n
所以为了更好的说明会简化并尽量简洁。 My accordion My accordion item 1 Content 1
我正在寻找可用于通过 @ViewChild 和 @ContentChild 访问子组件/DOM 元素的有效选择器的完整列表。 假设我有一个 child HelloComponent: 我知道我可以添加
Angular 2 提供了@ViewChild、@ViewChildren、@ContentChild 和@ContentChildren 装饰器来查询组件的后代元素。 前两者和后两者有什么区别? 最
我有一个使用内容投影的组件。 我想在我的组件中做这样的事情: @ContentChild('button') button: ElementRef; 但是,当我检查 this.button 时,它
我花了更多时间试图理解以下博文 Creating Reusable Components with NgTemplateOutlet in Angular 上面帖子的工作代码可以在stackblitz
我有一个组件 app-preview,它有一个由它的父组件推送到它的 ng-content 中的组件。 app-preview父级的代码: 我希望 app-previe
我有一个用于正确显示验证错误的表单容器。我通过 ContentChild 装饰器访问表单控件并被动地操作它以构建验证消息。 我的问题是:如何正确地对这样的组件进行单元测试? 组件.ts import
我最近开始使用 ViewChildren and ContentChildren在 Angular 2 中,但现在想知道这些是否也可以在没有 TypeScript 注释的情况下在 ES6 中使用。 T
我是一名优秀的程序员,十分优秀!