Angular 角度4材料捕捉变化事件

您好，我使用带材质的Angular 4。我想知道如何从a滑块捕捉父组件中的“更新”事件

---

这更确切地说

我不知道我是否准确地回答了您的问题，但我假设您在子组件中有一个滑块，并且您希望在父组件中更新

这就是您可以在父组件中执行的操作：

@Component({
   selector:"my-app",
   template:`<slider-configurable-example (slider)="parentmethod($event)"></slider-configurable-example>
          <div>{{data}}</div>
        `
 })

 export class ParentComponent{
          parentmethod(message){
              this.data="Message" + message;
          }
 }

export class SliderConfigurableExample {
 @Output() slider:EventEmitter<string> =
    new EventEmitter<string>();
    autoTicks = false;
  disabled = false;
  invert = false;
  max = 100;
  min = 0;
  showTicks = false;
  step = 1;
  thumbLabel = false;
  value = 0;
  vertical = false;



  get tickInterval(): number | 'auto' {
    return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : null;
  }
  set tickInterval(v) {
    this._tickInterval = Number(v);
  }
  private _tickInterval = 1;


  change(){
    console.log("value");
    this.slider.emit("Message from slider");
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{data}}
`
})
导出类ParentComponent{
父方法（消息）{
此.data=“Message”+消息；
}
}

拥有一个输出绑定并等待一个事件从子级发出

这是您在子组件中执行的操作：

@Component({
   selector:"my-app",
   template:`<slider-configurable-example (slider)="parentmethod($event)"></slider-configurable-example>
          <div>{{data}}</div>
        `
 })

 export class ParentComponent{
          parentmethod(message){
              this.data="Message" + message;
          }
 }

export class SliderConfigurableExample {
 @Output() slider:EventEmitter<string> =
    new EventEmitter<string>();
    autoTicks = false;
  disabled = false;
  invert = false;
  max = 100;
  min = 0;
  showTicks = false;
  step = 1;
  thumbLabel = false;
  value = 0;
  vertical = false;



  get tickInterval(): number | 'auto' {
    return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : null;
  }
  set tickInterval(v) {
    this._tickInterval = Number(v);
  }
  private _tickInterval = 1;


  change(){
    console.log("value");
    this.slider.emit("Message from slider");
  }
}

导出类滑块配置示例{
@Output（）滑块：EventEmitter=
新事件发射器（）；
自动链接=错误；
禁用=错误；
反转=假；
最大值=100；
最小值=0；
showTicks=false；
步骤=1；
拇指标签=假；
数值=0；
垂直=假；
获取tickInterval（）：编号|“自动”{
返回this.showTicks？（this.autoTicks？'auto）：this.\u tickInterval:null；
}
设置时间间隔（v）{
此值为间隔时间=数字（v）；
}
私有_tickInterval=1；
更改（）{
控制台日志（“值”）；
this.slider.emit（“来自slider的消息”）；
}
}

请注意

滑块

输出

变量和

更改

方法。滑动时，可以看到一个事件发出，在滑块下方显示一条消息。这只是一个通用示例，您也可以在需求中使用它

这里有一个提示：

如评论中所述，使用角度材质4+捕捉垫滑块变化的简单方法是（变化）事件

HTML

---

那么您在子组件中有一个滑块，然后您想将数据发射到父组件？

onInputChange(event:any){
        console.log("This is emitted as the thumb slides");   
}