@Input Decoratorを使用してngOnChangesライフサイクルフックを角度2でトリガーする

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> 

しかし、その後、検索テキストがバインドここではありません私のコントローラーに？

私は入れませんエラーが入力 『『それはの既知のプロパティではありませんので、』検索「にバインドできません』 です。

私は@Inputデコレータは、の世話をしたことを理解していましたそれが、明らかに私はここで何かが足りないのです

注：私は（ngModelChange）を使用してフィルタを追加しましたし、細かい私のcontroller..worksで[（ngModel）]の値に結合する。しかし、それはngOnChangesを使用してのように聞こえます。私はそれを動作させる方法を理解しようとしているので、これを行うための最良の方法です。ありがとう

Answer 1

私はわからないが、私は理解したよう私は私のコードでは似たような

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

}

を持って、私は実際に私がからkeyupに私のonEditを結合し、代わりにそれを、ngOnChanges機能を使用しておりませんとEventEmmiterによるトリガ変更イベント（）

私は私のコードは、あなたが解決

Answer 2

@Input()は、あなたが目に式をバインドすることができます見つけるのに役立つことを願っていますそのプロパティでバインドされたプロパティを使用することができます。searchを入力プロパティとして宣言すると、プロパティでバインディングを使用できます。したがって、これを使用するには、SearchComponentを配置するコンポーネントのテンプレートでこれを行うだけです（例：

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

HTMLInputElementインタフェースはそのようなメンバーを持っていないので、あなたはそれ故に例外、input要素にsearch財産上の結合性を行うことはできません。バインディングする特定の要素に存在するプロパティに対してのみプロパティバインディングを実行できます