Question

我尝试创建看起来像搜索表单的自定义组件。我用选择器SearchComponent创建了my-search，在其中放置了带有选择器<input>附加指令InputDirective的HTML [myInput]元素：

<my-search>
  <input myInput>
</my-search>

问题是如何从InputDirective内部的SearchComponent中检测更改？例如：当用户在输入中输入一些文本时，我应该启用或禁用按钮：

search.component.html

<ng-content select="[myInput]"></ng-content>
<button type="button" [disabled]="!searchText">Search</button>

我尝试订阅组件内部指令的更改，但这不起作用。

search.component.ts

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  ngAfterContentInit() {
    this.input.changes.subscribe(changes => console.log(changes));
  }
}

我也尝试在属性element中导出本机输入。

input.directive.ts

@Directive({
  selector: '[myInput]'
})
export class InputDirective {
  element: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement;
  }
}

当尝试使用getter来获取输入值时，但这也不起作用。

search.component.ts

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  get searchText(): string {
    return this.input.element.value;
  }
}

有人可以帮我吗？这是PutRequest个实验。

Answer 1

看起来您实际上并没有深入到要监视的输入元素，请尝试：

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  ngAfterContentInit() {
    this.input.element.addEventListener('change', e => console.log(this.input.element.value));
  }
}

这是您要找的吗？

Answer 2

您正在寻找的是您指令中的HostListener：

  @HostListener('keypress') changed;

您可以对其进行更多研究，哪些事件可用，但是每次按下搜索按钮时都会触发更改，您会得到诸如“ keydown”之类的其他消息，但您应该尝试一下

如果您想看看https://www.w3schools.com/tags/ref_eventattributes.asp

，这里是更多活动的列表

编辑：您甚至可以添加更多内容，方法是将更改添加到“更改”方法主体中，以将输出事件触发返回给父组件以继续处理该事件，但对于我从您的问题中了解到的，hostlistener会这样做。

如何从Angular 6的子指令中检测更改

2 个答案: