Question

我的子组件中包含以下代码：

组件

@Input() query: string;

ngOnChanges(changes) {
   if (changes['query']) {
     console.log('query is now: ', this.query);
   }
}

模板

<input type="text" [(ngModel)]="query">

然后在我的父组件中，我有以下内容： 1.模板

<my-input 
   (onSearch)="searchSelected($event)"             
   [searchTerm]="selectedSearch">
</my-input>

<span>search is: {{selectedSearch}}</span>

我的问题是，每当我输入输入组件时，它就永远不会更新父级中的selectedSearch。另外，当我在父组件中设置selectedSearch时，它不会在子组件上更新（ngOnChanges也不会触发）。我在做什么错了？

Answer 1

您的子组件期望输入query。您在使用时会给它一个seachTerm道具。

您需要将输入名称更改为

@Input() searchTerm: string;

或修改使用组件的方式以使用正确的输入

<my-input [query]="selectedSearch"></my-input>

现在到输出。您实际上需要在子组件上创建输出

@Output() onSearch = new EventEmitter<string>();

然后在您希望触发EventEmitter道具时调用onSearch

this.onSearch.emit(my_value)

您可以在此处找到有关该主题的更多文档：

https://angular.io/guide/component-interaction

Answer 2

您可以使用get / set

  private _query

  @Input()
  get query(): string {
    return this._query;
  }

  set query(value: string) {
    this._query= value;
    // do some logic on set
  }

如何检测@Input字符串上的更改

2 个答案: