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属性的所有代码并使用箭头函数vs函数表达式（以便函数不绑定到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()，你真的不需要专门的方法。

Angular2。如何将数据从子组件传输到父组件？

3 个答案: