1

Я только начал изучать angular, не судите строго. У меня есть компонент с диапазоном значений. Мне нужно при изменении диапазона передавать значения диапазона в родительский компонент. Вот мой компонент:

TS:

import { Component, 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;

    createSliderRange(minValue: number, maxValue: number) {
        $("#slider-range").slider({
            animate: "fast",
            range: true,
            min: minValue,
            max: maxValue,
            values: [minValue, maxValue],
            slide: function (event, ui) {
                $("#range").val(ui.values[0] + " - " + ui.values[1]);
                return $("#range").val(ui.values[0] + " - " + ui.values[1]);
            }
        });

        $("#range").val($("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1));

        return $("#slider-range").slider("values", 0) + ";" + $("#slider-range").slider("values", 1);
    }
}

HTML:

<p>
    <label for="range">Years range: </label>
    <input type="text" id="range" readonly />
</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',
    styleUrls: ['./app/components/calculations/calculations.component.css'],
    providers: [ SliderRangeComponent ]
})

export class CalculationsComponent implements OnInit { 
    range: string;    

    constructor(private sliderRange: SliderRangeComponent) { }

    ngOnInit() {
        this.range = this.sliderRange.createSliderRange(25, 35);
        console.log(this.range);
    }
}

1 ответ 1

3

Вот рабочий вариант с некоторым изменением кода:

Дочерний компонент:

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;
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.