Question

我正在尝试使用ngOnChanges创建搜索过滤器，因为用户在输入中输入字母。这是我的代码：

export class SearchComponent implements OnInit, OnChanges {
        @Input() search:string

         // trying to get this to run each time the input value changes
         public ngOnChanges(changes: any) {
            console.log(changes.search);
         }
}

@NgModule({
      imports: [MaterialModule, FlexLayoutModule, BrowserModule, FormsModule]
      // declarations, providers, exports also defined here
 })

组件模板中的输入元素：

// using Material Design Library
<input mdInput [search]="searchText" type="text" placeholder="Search"></input>

或者我只能使用这样的@Input：

<search-component [search]="searchText"></searchComponent>

但是这里的searchText是否绑定到我的控制器？

我一直得到的错误是“无法绑定到”搜索“，因为它不是”输入“的已知属性。

我知道@Input装饰师会照顾到这一点，但显然我在这里遗漏了一些东西。

注意：我确实使用（ngModelChange）添加过滤器并绑定到我的控制器中的[（ngModel）]值。工作正常。但听起来像使用ngOnChanges是最好的方法，所以我试图了解如何使它工作。感谢

Answer 1

@Input()允许您将表达式绑定到使用它标记的属性，因此将search声明为输入属性允许您对该属性使用属性绑定。因此，要使用它，只需在您想要放置SearchComponent的某个组件模板中执行此操作，例如

<app-root>
    <search-component [search]='"dummy text"'></searchComponent>
</app-root>

您不能对search元素上的input属性执行属性绑定，因为HTMLInputElement接口没有此类成员，因此异常。您只能对绑定到该

的特定元素上存在的属性执行属性绑定

Answer 2

我不确定，但我的代码中有类似内容

@Directive({
  selector: '[contenteditableModel]',
  host: {
    '(blur)': 'onEdit()',
    '(keyup)': 'onEdit()'
  }

})

export class ContentEditableDirective implements OnChanges {
@Input('contenteditableModel') model:any;
@Output('contenteditableModelChange') update = new EventEmitter();

constructor(private elementRef:ElementRef) {

}


ngOnChanges(changes:SimpleChanges):void {

    if (changes.model.firstChange == true) {
        this.refreshView();
    }

}

public onEdit() {

    let value:string = this.elementRef.nativeElement.innerHTML;
    this.update.emit(value);

}

public refreshView():void {

    this.elementRef.nativeElement.innerHTML = this.model;
}

}

据我了解，我实际上并没有使用ngOnChanges函数，而是将它绑定在 keyup 上的onEdit并通过EventEmmiter（）触发更改事件

我希望我的代码可以帮助您找到解决方案

使用@Input Decorator在Angular 2中触发ngOnChanges生命周期钩子

2 个答案: