使用@Input装饰器触发Angular 2中的ngOnChanges生命周期钩子

我正尝试使用ngOnChanges创建一个搜索过滤器，因为用户在输入中键入字母。这里是我的代码：分量模板使用@Input装饰器触发Angular 2中的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）]在我controller..works精值过滤器，但它听起来像使用ngOnChanges。是做这件事的最好方法，所以我想了解如何使它工作。谢谢

来源

2017-04-19 bschmitty

我不知道，但我有类似的东西在我的代码

@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功能，而不是它，我结合我onEdit上KEYUP并触发change事件通过EventEmmiter（）

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

来源

2017-04-19 21:42:37 Leguest

@Input()允许你绑定一个表达式TH e属性，因此声明search作为输入属性允许您在该属性上使用属性绑定。所以要使用它，只需在您想要将您的SearchComponent放置在某个组件的模板中，例如

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

你不能做一个属性上search属性绑定input元素上，因为HTMLInputElement接口没有这样的成员，因此例外。您只能对属于您绑定的特定元素上的属性执行属性绑定。

来源

2017-04-20 08:02:41 Dummy

OK对于输入元素属性有意义。因此，如果我将它添加到组件元素中，那么可以自动在我的模板中为查找任何输入元素，并通过ngOnChanges获取更改？这不是更新，所以我仍然错过了一些东西。或者，如何在我的模板中的输入元素上进行更改？我怎样才能绑定到输入的文本值，因为用户输入到它..i.e。我怎么能两种方式绑定到我的控制器内的虚拟文本 - [（搜索）] ='dummyText'，和控制器：“this.dummyText”..是否正确？谢谢 – bschmitty

的模板有一个来自服务的数据列表，然后使用* ngFor将它显示在页面上，所以它不仅仅是输入元素，就是它。在顶部有一个输入用户可以过滤的模板......这就是为什么我想知道模板中的特定输入元素会发生怎样的变化...... – bschmitty

如果你想要2路数据绑定，那么在你的'SearchComponent'模板中，做这个''，所以如果用户输入一些文本，'input.value'改变，它会更新你的'search'属性，如果你的'search'属性改变了，那么文本输入框也会显示新值，这是2路数据流为你。请注意，为了使用角度形式，每个元素必须在其上设置“名称”属性 – Dummy

使用@Input装饰器触发Angular 2中的ngOnChanges生命周期钩子

回答

相关问题