Рубрики
Без рубрики

Angular7 101: @Input () & @output ()

Существует два способа обмена данными между компонентами: использование декораторов @Input () и @Output () или услуга. В этом упражнении мы будем использовать компонентные декораторы.

Автор оригинала: Matthew Davis.

Существует два способа обмена данными между компонентами: использование декораторов @Input () и @Output () или Сервис Отказ В этом упражнении мы будем использовать компонентные декораторы.

@Input () Декоратор реализует свойство ввода, которое доступно на шаблоне компонентов.

test-input.component.ts.

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

@Component({
    selector: 'app-test-input',
    templateUrl: './test-input.component.html',
    styleUrls: ['./test-input.component.scss']
})
export class TestInputComponent {

    @Input() public myInputVariable: string;

}

@Output () Декоратор реализует свойство вывода и положения наблюдаемый, который также доступен на шаблоне компонентов.

test-ouput.component.ts.

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

@Component({
    selector: 'app-test-output',
    templateUrl: './test-output.component.html',
    styleUrls: ['./test-output.component.scss']
})
export class TestOutputComponent {

    @Output() public myOutput = new EventEmitter();

    public buttonClick(): void {

        this.myOutput.emit('helloworld');

    }

}

Смотрите также:

Смотреть больше в https://mathewdavis.io

Читайте ещё по теме: