角度2。 如何將數據從子組件傳輸到父組件？

Question

我有一個值范圍的組件。 更改范圍時，我需要在父組件中傳輸一個值范圍。 這是我的組件：

TS：

import { Component, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core';

@Component({
    selector: 'sliderrange-app',
    templateUrl: './app/components/slider.range/slider.range.component.html',
    styleUrls: ['./app/components/slider.range/slider.range.component.css']
})

export class SliderRangeComponent {
    range: string;

    @Output() rangeChange: EventEmitter<string>;

    constructor() {
        this.range = "25 - 55";
        this.rangeChange = new EventEmitter<string>();
    }

    onRangeChange(model: string): void {
        this.rangeChange.emit(model);
        console.log(model);
    }

    createSliderRange(minValue: number, maxValue: number) {
        var scope = this;

        $("#slider-range").slider({
            animate: "fast",
            range: true,
            min: minValue,
            max: maxValue,
            values: [ minValue, maxValue ],
            slide: function (event, ui) {
                let newVal: string = `${ui.values[0]} - ${ui.values[1]}`;
                $("#range").val(newVal);
                scope.onRangeChange(newVal);
            }
        });  

    }
}

HTML：

<p>
    <label for="range">Years range: </label>
    <input type="text" id="range" value="{{ range }}" [(ngModel)]="range" />
</p>

<div id="slider-range"></div>

您要將值傳送到的組件：

TS：

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { SliderRangeComponent } from '../slider.range/slider.range.component';

@Component({
    selector: 'calculations-app',
    templateUrl: './app/components/calculations/calculations.component.html'
    providers: [ SliderRangeComponent ]
})

export class CalculationsComponent implements OnInit { 
    range2: string;    

    onRangeChange(event) {
        console.log("Calculations " + event);
        //this.range2 = model;
    }

    constructor(private sliderRange: SliderRangeComponent) { }

        ngOnInit() {
            this.sliderRange.createSliderRange(25, 55);
        }
}

HTML：

<sliderrange-app (rangeChange)="onRangeChange($event)"></sliderrange-app>
<div>val: {{range2}}</div>

這不起作用。 為什么？

Answer 1

問題是我創建了一個新實例

constructor(private sliderRange: SliderRangeComponent) { }

ngOnInit() {
    this.sliderRange.createSliderRange(25, 55);
}

我更換了組件。 這是一個工作版本：

TS：

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'sliderrange-app',
    template: `
        <p>
            <label for="range">Years range: </label>
            <input type="text" id="range" readonly value="{{ range }}" />
        </p>

        <div id="slider-range"></div>
    `
})

export class SliderRangeComponent {
    range: string;

    @Input() minValue: number;
    @Input() maxValue: number;

    @Output() rangeChange: EventEmitter<string>;

    constructor() {
        this.range = "25 - 55";
        this.rangeChange = new EventEmitter<string>();
    }

    ngOnInit() {
        $("#slider-range").slider({
            animate: "fast",
            range: true,
            min: this.minValue,
            max: this.maxValue,
            values: [this.minValue, this.maxValue],
            slide: (event, ui) => {
                let newVal: string = `${ui.values[0]} - ${ui.values[1]}`;

                this.rangeChange.emit(newVal);
                $("#range").val(newVal);
            }
        });
    }
}

父組件：

import { Component } from '@angular/core';

@Component({
    selector: 'calculations-app',
    template: `
        <sliderrange-app (rangeChange)="onRangeChange($event)" [minValue]="12" [maxValue]="34" ></sliderrange-app>
        <div>val: {{range2}}</div>
    `
})

export class CalculationsComponent {
    range2: string;

    onRangeChange(model) {
        console.log(model);
        this.range2 = model;
    }
}

Answer 2

在數據綁定中僅使用范圍：

<sliderrange-app (range)="onRangeChange($event)"></sliderrange-app>

Answer 3

您的代碼看起來不錯。

也許嘗試為slide屬性內聯所有代碼，並使用箭頭函數與函數表達式（以使函數不會綁定到this ）；

$("#slider-range").slider({
    animate: "fast",
    range: true,
    min: minValue,
    max: maxValue,
    values: [ minValue, maxValue ],
    slide: (event, ui) => {
        let newVal: string = `${ui.values[0]} - ${ui.values[1]}`;
        $("#range").val(newVal);
        this.rangeChange.emit(newVal);
    }
}); 

在子級中，如果您沒有從其他任何地方調用onRangeChange() ，則實際上並不需要專用的方法。