接收消息作为输入并从用户那里获取间隔值

Question

我想创建一个名为 CounterComponent 的简单 Angular 组件，由选择器 counter-component 标识。

组件的目标是：

• 接收消息作为输入
• 从用户那里获取一个间隔值（以毫秒为单位的整数）
• 定期将消息作为事件发送到其输出

该组件由一个<input> 字段和id="intervalInput" 和一个<button> 和id="intervalSetButton" 组成。用户可以通过在字段中写入值来设置间隔，然后单击按钮。

该组件应该有一个名为message 的@Input 和一个名为tick 的@Output。它应该以用户指定的时间间隔向tick 生成字符串事件。该字符串来自message 输入。

组件应处理输入更改和间隔值更改。

    // Angular 8.x​​​​​​‌​​​‌‌​​‌‌​‌​​‌‌‌‌​​​​‌​​ code
    import { Component, NgModule } from '@angular/core';


    @Component({
      selector:'counter-component',
      template: `
         <input id="intervalInput"/>
         <button id="intervalSetButton">Set interval</button>
      `
    })
    export class CounterComponent {
    }

    // #region Preview
    @Component({
      selector:'display-component',
      template: `
        <counter-component [message]="'Hello world'" (tick)=counterTick($event)></counter-component>
        <div>{{message}} {{counter}}</div>
      `
    })
    export class DisplayComponent {
      public counter: number = 0;
      public message: string;

      public counterTick(message: string): void {
        this.message = message;
        this.counter++;
      }
    }
    @Component({
        template: `<display-component></display-component>`
    })
    export class PreviewComponent { }
    // #endregion Preview

Answer 1

在您的目标中，问题多于答案。无论如何，我通过实现创建了demo

@Component({
  selector:'app-display',
  template: `
    <div>{{message}} {{counter}}</div>
    <app-counter [message]="message" (tick)=counterTick($event)></app-counter>
  `
})
export class DisplayComponent {
  public counter: number = 0;
  public message: string = 'hello world';

  public counterTick(message: string): void {
    this.message = message;
    this.counter++;
  }
}

@Component({
  selector: 'app-counter',
  template: `
    <input type="number" [(ngModel)]="inputValue"/>
    <button (click)="buttonClicked.next()">Set interval</button>
  `
})
export class CounterComponent {
  @Input() message: string;

  public buttonClicked: Subject<void> = new Subject();
  @Output() tick: Observable<string> = this.buttonClicked.pipe(
    map(() => parseInt(this.inputValue, 10)),
    filter(value => Number.isInteger(value)),
    switchMap(value => interval(value)),
    map(() => this.message)
  )

  public inputValue: string = '' ;
}