Блог

Главная - Вопросы по программированию - Взаимодействие компонентов Angular: от родителя к потомку

Взаимодействие компонентов Angular: от родителя к потомку

#angular

#angular

Вопрос:

Я вижу, что взаимодействие родительского и дочернего компонентов может быть выполнено с использованием LocalVariable или @ViewChild. Какой лучший способ использовать и почему?

Вот код с сайта angular, который я пытаюсь понять локальную переменную

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

@Component({
  selector: 'app-countdown-timer',
  template: '<p>{{message}}</p>'
})
export class CountdownTimerComponent implements OnDestroy {

  intervalId = 0;
  message = '';
  seconds = 11;

  ngOnDestroy() { this.clearTimer(); }

  start() { this.countDown(); }
  stop()  {
    this.clearTimer();
    this.message = `Holding at T-${this.seconds} seconds`;
  }

  private clearTimer() { clearInterval(this.intervalId); }

  private countDown() {
    this.clearTimer();
    this.intervalId = window.setInterval(() => {
      this.seconds -= 1;
      if (this.seconds === 0) {
        this.message = 'Blast off!';
      } else {
        if (this.seconds < 0) { this.seconds = 10; } // reset
        this.message = `T-${this.seconds} seconds and counting`;
      }
    }, 1000);
  }
}
  
 import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
  selector: 'app-countdown-parent-lv',
  template: 
  <h3>Countdown to Liftoff (via local variable)</h3>
  <button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
  <app-countdown-timer #timer></app-countdown-timer>
  `,
  styleUrls: ['../assets/demo.css']
})
export class CountdownLocalVarParentComponent { }

Во втором фрагменте кода я вижу, что они используют локальную переменную #timer для доступа к методам дочернего класса в родительском компоненте. Есть ли какая-либо конкретная причина использовать LocalVariable вместо @ViewChild

Комментарии:

1. Ваш вопрос выглядит очень широким, не могли бы вы поделиться конкретной проблемой, с которой вы столкнулись или пытаетесь получить ответ.

Ответ №1:

вы также можете использовать свойства Angular @Input() и @Output()

свойства ввода и вывода

Ответ №2:

Существует несколько способов взаимодействия с компонентами. Однако, если вы хотите взаимодействовать с компонентами, самый простой способ — использовать декораторы @Input и @Output .Если вы новичок в Angular, попробуйте использовать @Input() и @Output декоратор для взаимодействия между компонентами. Вы также можете использовать сервисы в Angular для взаимодействия компонентов или тот, который вы упомянули выше. Пожалуйста, проверьте ссылку для лучшего понимания.

компонент-взаимодействие