angular - 如何从父组件查询 ng-content 的输入元素

Question

创建如下所示的组件

<div class="test-search-field"
  [ngClass]="{'expanding': expanding}">
  <ng-content></ng-content>
</div>

该组件的用户在使用该组件时会添加一个input元素。

<my-input-container>
    <input type="search" placeholder="Search">
</my-input-container>

我想从组件中获取此输入元素，但在使用 @ContentChild 进行查询时出错。

@ContentChild('input') inputElemRef: ElementRef;

  ngAfterContentInit() {
    setInterval(() => {
      console.log(this.inputElemRef);
    }, 2000);

但是这个 inputElemRef 总是未定义。

谁能告诉我我在这里犯了什么错误。

Answer 1

1. 通过指令类 token 查询。

我的输入.directive.ts

import { Directive } from '@angular/core';

@Directive({
  selector: '[myInput]',
})
export class MyInputDirective  {}

我的输入容器.component.ts

import { Component, Input, ContentChild, AfterContentInit, ElementRef } from '@angular/core';
import { MyInputDirective } from './my-input.directive';

@Component({
  selector: 'my-input-container',
  template: `<ng-content></ng-content>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class MyInputContainerComponent implements AfterContentInit {
  @ContentChild(MyInputDirective, { read: ElementRef }) child: MyInputDirective;

  ngAfterContentInit() {
    console.log(this.child);
  }
}

用法:

<my-input-container>
  <input myInput />
</my-input-container>

Live demo

1. 通过模板变量查询。

如果你只关心ElementRef，你可以完全跳过自定义指令，而是通过模板变量查询。

我的输入容器.ts

import { Component, Input, ContentChild, AfterContentInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-input-container',
  template: `<ng-content></ng-content>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class MyInputContainerComponent {
  @ContentChild('myInput') child: ElementRef;

  ngAfterContentInit() {
    console.log(this.child);
  }
}

用法:

<my-input-container>
  <input #myInput />
</my-input-container>

Live demo

一般来说，第一个选项是可取的，它是 @angular/material 对其输入组件所做的。它们将容器组件 (mat-form-field) 与应用于 native 输入元素 (matInput) 的指令配对。

它更灵活，因为您可以查询 Directive 或 ElementRef。

@ContentChild(MyInputDirective) child :MyInputDirective;

@ContentChild(MyInputDirective, { read: ElementRef }) child: MyInputDirective;