Question

我正在寻找可用于通过@ViewChild和@ContentChild访问子组件/ DOM元素的有效选择器的完整列表。

说我有一个孩子HelloComponent：

我知道我可以添加模板#ref并对其进行查询，如下所示：

<hello #myHello></hello>

@ViewChild('myHello') myHello: HelloComponent;

或者我可以直接查找该组件（没有模板#ref）：

@ViewChild(HelloComponent) myHello: HelloComponent;

在this issue中，提到可以使用以下选择器：

我们目前正在支持CSS选择器的子集：
  *元素选择器
  *属性选择器（包括值）
  *：不是（...）伪选择器
  *上述（包括）的组合

但是当我在Stackblitz中测试这些以验证（here's the link to that）时，我实际上无法让前三个中的任何一个工作。 （检查控制台以查看undefined我无法使用的选择器类型。我不确定我是否对这些选择器做错了或者是否真的列表不同。）

那么，哪些选择器会起作用？此外，@ViewChild，@ContentChild，@ViewChildren和@ContentChildren的列表是否相同？

Answer 1

首先，正如@JB Nizet已经在评论中提到 the comment in the issue错误：它与查询选择器无关，而是指directive selector。< / p>

让我们来看看我们可以用于查询的选择器类型。

针对查询的Angular文档states：

选择器 - 用于查询的指令类型或名称。

指令类型

似乎任何人都应该清楚（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;
}

我们可以在这里结束，但现在是时候看一下角度源代码并深入了解。

隐藏行为

让我们看一下角度编译器用来读取查询元数据的the code：

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是一些我们无法查询的内部令牌。

可以通过模板参考变量或使用 read option

查询

ElementRef

（6）可以通过selector 查询TemplateRef：

@Component({
  selector: 'host-comp',
  template: `
    <ng-template></ng-template>
  `
})
export class HostComp {
  @ViewChild(TemplateRef) template;
}

当然还有ViewContainerRef到read选项。

Provider可以使用read选项或通过选择器获得，如我在此答案中所述。

Answer 2

简而言之查看孩子 您可以使用anglular指令，组件选择器，参考变量

ViewChild和ContentChild的所有有效选择器是什么？

2 个答案:

指令类型

用于查询的名称

隐藏行为