最新のangle2形式

Question

私は、以下のように、angle2バージョンのデバウンス入力コントロールを持っています。私component.tsで

<input type="text" [ngFormControl]="compInput" placeholder="demo input" /> 

import {Component} from "angular2/core"; 
import {Control} from "angular2/common"; 
@Component({ 
... 
) 
export class Demo{ 
    private compInput = new Control(); 
    constructor(){ 
    this.compInput.valueChanges.subscribe(() => {}); 
    } 
} 

私はangular2バージョンが最新にアップグレードするまで、これらのコードは動作します。 フォームの使用が変更されたようです。

私は "角度/フォーム@" からFormControlに[ngFormControl]にngControlとコントロールを変更しましたが、動作しません。

私は新しい使用法についてどこが間違っていて、修正する方法を知っていますか？ここで

Answer 1

感謝を使った簡単な例を示します。私は同僚の助けを借りて私の質問に対する答えを見つけました。ここにあります。

template.html

<form #form="ngForm"> 
    <input name="nameInput" [(ngModel)]="componentName" #nameInput="ngModel"> 
</form> 

component.ts

import {Component, ViewChild} from "@angular/core"; 
import {NgModel} from "@angular/common"; 

@Component({...}) 
export class Demo{ 
    @ViewChild('nameInput') nameInput:NgModel; 
    componentName:string; 

    ngAfterViewInit(){ 
    this.nameInput.update //or this.nameInput.control.valueChanges 
    .subscribe((val:any) => {console.log("value update", val);}) 
    } 
} 

Answer 2

は、すべてのあなたの助けngModel

import {Component, Input, Output, HostListener, EventEmitter, ChangeDetectionStrategy} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
import {Subject} from 'rxjs/Subject'; 

@Component({ 
    moduleId: module.id, 
    selector: 'user-search', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    template: ` 
    <form role="search"> 
     <div class="form-group"> 
     <input 
      class="form-control" 
      name="input" 
      type="text" 
      placeholder="Search user" 
      [(ngModel)]="input" 
      (keyup)="keyup$.next($event.target.value)" 
     /> 
     </div> 
    </form> 
    ` 
}) 
export class UserSearchComponent { 

    input: string; 

    keyup$ = new Subject<string>(); 

    @HostListener('window:keyup', ['$event']) 
    cancelSearch(event) { 
    if (event.code === 'Escape') { 
     this.input = undefined; 
     this.keyup$.next(undefined); 
    } 
    } 

    @Output() search: Observable<string> = this.keyup$ 
    .debounceTime(700) 
    .distinctUntilChanged(); 

}