Angular 6 правильно инициализирует пользовательский компонент ввода

Я пытался создать пользовательский компонент ввода с помощью debounce, поэтому я последовал этому предложению

Debounce работает, но в начале входное значение не правильно установлено на компонент ввода.

Вот как я это реализовал:

app.component.ts

import { Component } from '@angular/core';
import { DebInputComponent } from './deb-input/deb-input.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  test:string ='test';
}

app.component.html

  <deb-input [(ngModel)]="test" type="text" label="Test" ngDefaultControl>
  </deb-input>
<div>{{test}}</div>

deb-input.component.ts

import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { Component, Input }   from '@angular/core';

@Component({
  selector: 'deb-input',
  templateUrl: './deb-input.component.html',
  styleUrls: ['./deb-input.component.css'],
  providers: []
})

export class DebInputComponent {
    @Input() label: string;
    @Input() type: string="text";
    @Input() model: string;
    modelChanged: Subject<string> = new Subject<string>();

    constructor() {
     this.modelChanged
      .pipe(debounceTime(1000))
      .pipe(distinctUntilChanged())
      .subscribe(newValue => {this.model = newValue;
        console.log(this.model)});
    }

    changed(text: string) {
        this.modelChanged.next(text);
    }
}

deb-input.component.html

 <div>
 <span>{{label}}</span>
 <input [(ngModel)]='model' (ngModelChange)='changed($event)' [type]='type' ngDefaultControl/>
</div>

Как я могу убедиться, что model внутри deb-input правильно установлено на «тест»?


typescript javascript angular angular6 angular5
person Igino Boffa    schedule 19.06.2018    source источник
comment
Вам следует использовать ControlValueAccessor — angular.io/api/forms/ControlValueAccessor, если вы хотите реализовать пользовательский управление формой.. это рекомендуемый способ   -  person Abinesh Devadas    schedule 19.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы используете ngmodel, тогда как вы должны использовать имя ввода вашего компонента

<deb-input [model]="test" type="text" label="Test" ngDefaultControl>
  </deb-input>

Редактировать

Если вам нужна двусторонняя привязка для вашего компонента, просто добавьте eventEmitter к вашему компоненту следующим образом:

@Input() model: string;
@Output() modelChange = new EventEmitter<string>();
modelChanged: Subject<string> = new Subject<string>();
@Output() modelChangeEvt = new EventEmitter<string>();

 constructor() {
 this.modelChanged
  .pipe(debounceTime(1000))
  .pipe(distinctUntilChanged())
  .subscribe(newValue => {this.model = newValue;
    this.modelChangeEvt.emit(newValue);
    console.log(this.model)});
}

Затем используйте двухстороннюю привязку в HTML:

<deb-input [(model)]="test" type="text" label="Test" ngDefaultControl></deb-input>
person Melchia    schedule 19.06.2018
comment
Так просто, здорово :) - person Igino Boffa; 19.06.2018