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

Posted 2023-02-23

【中文标题】接收消息作为输入并从用户那里获取间隔值

【英文标题】：Receive a message as input and Get an interval value from the user

【发布时间】：2020-10-05 09:38:29

【问题描述】：

我想创建一个名为 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

【问题讨论】：

错误是什么？什么不工作？

【参考方案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 = '' ;

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review