如何在Angular 6中检测来自child指令的更改

Question

我尝试创建看起来像搜索表单的自定义组件。我创建了SearchComponent与选择器my-search，其中我已经放置HTML <input>元素与附加指令InputDirective与选择器[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;
  }
}

谁能帮我这个？这是link的实验。

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将会做的事情。

Answer 3

在Angular（版本2+）中，我们有一些调用EventEmitter的东西，使用哪个子组件可以发出它的任何变化

    Below is what you need in your child component
     1)@Output() change: EventEmitter<string> = new EventEmitter<string>();

    2)Also add a method that emits change when keypress event occurs
        onKeyPress(value: string) {
                this.change.emit(value);
            }
    3)change your html
    <my-search>
      <input myInput (change)="searchChange($event)">
    </my-search>

     4)change your boolean "searchText" in the method searchChange as below
       public searchChange(event:any)
{
if(event && event.length>0)
searchText=true
}