Проблема с активацией класса ng между двумя компонентами

Question

Здравствуйте, я хотел бы получить доступ к функции onClick () в app.component.ts через submit-area.component.ts с Output () для управления активацией класса ng.

UseCase:

Пользователь нажимает кнопку «Второй», а после нажатия кнопки «Отправить» он автоматически попадает в кнопку «Первый».

Можете ли вы мне помочь?

Я создал свой код в StackBlitz

https://stackblitz.com/edit/angular-lgzgn4

Answer 1

дочерний элемент (отправить компонент): html

<button (click)="submit()">Submit</button>

дочерний элемент (отправить компонент): здесь мы отправим наше событие через @output на родительский элемент

@Output() valueChange = new EventEmitter();

      constructor() { }

      ngOnInit() {
      }

      public submit() {
        this.valueChange.emit();
      }

и в родительский html. (компонент кнопки) мы назначим функцию, скажем, display () для события от потомка

<app-submit-area #component1 (valueChange)='display($event)' ></app-submit-area>

и обработаем функцию display () в вашей ts

display(){
/// your logic
 }

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

Answer 2

Я разбудил ваш stackblitz и убедился, что кнопка 2 выбрана после нажатия кнопки отправки:

• добавьте событие нажатия на кнопку отправки и отправьте ваш источник событий.
• в application.component.html привяжите событие onClick компонента submit к функции отправки.