我试图用 来创建一个自定义输入组件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';
}
应用程序组件.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正确设置为“测试”？
您正在使用，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 中使用 2 路绑定：
<deb-input [(model)]="test" type="text" label="Test" ngDefaultControl></deb-input>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句