Angular 4材料捕捉更改事件

Question

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

https://material.angular.io/components/component/slider

@Output() 
change 

Event emitted when the slider value has changed. 

这更准确地

Answer 1

我不知道我是否有你的问题恰好或没有，但我认为你在子组件的滑块和你宛在谭更新父组件。

所以这是你可以在你的父组件做什么：

@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"); 
    } 
} 

通知的sliderOutput变量和方法change。当你滑动时，你可以看到一个事件发出，在滑块下面显示一条消息。这只是一个通用的例子，您也可以在您的需求中使用相同的方法。

这里有一个plunker：https://plnkr.co/edit/LKEeL7yPjLHGWWRUjoeZ?p=preview