각도 4 재료 캐치 변경 이벤트

Question

안녕하세요 저는 각도 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 방법. 슬라이드하면 슬라이더 아래에 메시지를 표시하는 이벤트 방출을 볼 수 있습니다. 이는 단지 일반적인 예일 뿐이므로 요구 사항에서도 같은 것을 사용할 수 있습니다. https://plnkr.co/edit/LKEeL7yPjLHGWWRUjoeZ?p=preview