Передача значения одного компонента в другой Angular

Question

У меня есть элемент ввода в компоненте, например так:

   <input #inputDate
          (blur)="realDate(inputDate.value); inputDate.value='' ">

, а затем я хочу использовать (показать) значение inputDate для другого компонента, как я могу это сделать?я новичок в угловой, любая помощь будет оценена.

Answer 1

Если вы хотите отправить свой компонент родительскому компоненту, вы можете использовать декоратор @Output() и генератор событий вместе, чтобы отправить значение родительскому компоненту, выполнив что-то вроде:

@Output()
public input: EventEmitter<string> = new EventEmitter<string>();

<my-input (input)="onInputChange()"></my-input>

// Method to detect for changes on #myInput
public onMyInputChanges(): void {
    // ...
    input.emit(<#myInputValue>);
}

Я оставлю это в качестве упражнения для вас, чтобы выяснить, как обнаружить изменения в вашем элементе ввода выше.

Если вы хотите отправить свое значение дочернему компоненту, вы можете использовать декоратор @Input() ипередайте его так:

<input #myInput [(ngModel)]="inputValue">

public inputValue: string = '';

<child-component [value]="inputValue"></child-component>

Поскольку вы хотите использовать значение непосредственно из HTML, рассмотрите возможность использования декоратора @ViewChild, который позволит вам использовать локальную ссылку #inputDate для получения значениявот так:

@ViewChild('inputDate')
public myInput: HTMLInputElement;

И затем вы можете получить доступ к своему значению через myInput.value и либо использовать его в своем компоненте, либо передать его с помощью описанных выше методов.

Вы также можете посмотретьиспользование Services, которое может помочь вам повторно использовать часть этой логики в нескольких компонентах, если это ваш вариант использования (например, выдает значение из Subject и прослушивает несколько компонентовизменения на вашем входе).

Answer 2

Если вы хотите отправить его на родительский компонент, привяжите его к ngModel и используйте отправитель событий для отправки этого значения.

Если вы хотите отправить его на дочерний компонент, используйте декоратор @Input.( parent-to-child )

Однако, поскольку вы хотите отправить значение из html, вы можете использовать jquery или document.querySelector, чтобы получить значение

Это может помочь вам