如何检测Angular 6中儿童指令的变化

Question

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

中

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

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

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;
  }
}

有人可以帮我吗？这是实验的链接。

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

在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
}

Answer 3

您要寻找的是指令中的hostlistener：

  @HostListener('keypress') changed;

您可以更多地研究它，可用的事件可用，但是每次按搜索按钮时，更改都会触发，您会得到其他类似" keydown"的事件，但您应该尝试一下

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

，这是更多事件的列表。

编辑：您甚至可以通过添加更改方法来做出更多的方法，以将输出事件触发回到父组件以继续处理该事件，但是对于我从Hostlistener会做的问题中我了解的是。