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

Question

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

该组件的目标是：

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

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

该组件应具有一个名为@Input的message和一个名为@Output的tick。它应按用户指定的时间间隔生成字符串事件到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