WedX - журнал о программировании и компьютерных науках

Angular 7+, хорошо ли вызывать метод дочернего компонента из родительского?

Иногда я хочу вызвать метод дочернего компонента из родительского компонента или каким-то образом уведомить дочерний элемент (от родителя) о вызове чего-либо.

1-й (вызов метода дочернего компонента из родительского):

// CHILD
@Component({
  selector: 'child-component',
  template: '<p>child</p>'
})

class ChildComponent {

  doSomething() {
    console.log('I am from child')
  }

}

// PARENT
@Component({
  selector: 'parent-component',
  template: '<child-component></child-component>',
})

class ParentComponent{

  @ViewChild(ChildComponent ) child: ChildComponent;

  ngAfterViewInit() {
    this.child.doSomething();
  }
}

2-й (уведомить дочерний компонент о вызове чего-либо):

//CHILD
export class ChildComponent implements OnInit {

  @Input() notify: Subject<boolean>;

  ngOnInit(){
     this.notify.subscribe(v => { 
        console.log("I am from child");
     });
  }

}

//PARENT
export class ParentComp {

    notify: Subject<boolean> = new Subject();

    notifyChild(){
        this.notify.next(true);
    }

}

Вот мои вопросы:

1) Каковы минусы и плюсы 1-го способа? также, если вы вызываете дочерний метод из родителя, означает ли это, что у вас плохая архитектура для ваших компонентов или что-то еще нужно исправить?

2) Какие минусы и плюсы у 2-го способа?

3) Хорошо ли их избегать?

Я отчаянно пытаюсь найти ответы на эти вопросы (с пояснениями). Было бы здорово, если бы кто-то мог их предоставить.

17.07.2019

  • Ответ сильно зависит от того, чего именно вы хотите достичь. В моей компании мы стараемся избегать тем вообще, а также ViewChild. Если бы нам нужно было выбирать между ними, ViewChild был бы нашим предпочтением. Не могу толком объяснить, но Субъект более заковырист, и за ним труднее следить. 17.07.2019
  • я не думаю, что есть какие-то проблемы с 1 методом, так как вы вызываете метод дочернего элемента. это похоже на использование кнопки html и вызов события щелчка. Я вижу компоненты как пользовательские теги, добавленные пользователем, поэтому, если вы используете их в своем ts-файле и методе вызова, в этом нет ничего плохого. Примечание: это моя точка зрения 17.07.2019
  • Я не использую второй метод, особенно когда есть отношения родитель-потомок, вместо этого я должен был создать службу с субъектом и внедрить эту службу для обеспечения связи между моим компонентом, вы можете сослаться на сайт angular.io, где использование службы является одним из способов для обеспечения связи между компонентами 17.07.2019

Ответы:


1

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

17.07.2019

2

Я бы избегал использования любого метода, если это возможно. Если вы обнаружите, что вам часто нужно это делать, то, вероятно, вы неправильно распределяете обязанности между родителем и ребенком. Вы должны передать все необходимые данные дочернему элементу, чтобы он знал, когда вызывать какую-либо функцию, и если он все еще не вызывает, это, вероятно, не ответственность компонентов. Сказав, что если вы обнаружите, что пишете довольно сложное приложение и все еще нуждаетесь в этой функциональности, я бы использовал что-то вроде ngrx для правильного управления состоянием. Также, если вы будете использовать второй метод, вы должны разделить тему на услугу. Что касается аргументации, то по мере того, как приложение увеличивается в размере и усложняется, очень удобно полагаться на предсказуемый поток информации и действий, поэтому ngrx может быть полезен, но использование первого или второго метода пару раз в вашем приложении, вероятно, не убьет ты.

17.07.2019

3

Вы можете использовать обнаружение изменений:

// CHILD
@Component({
  selector: 'child-component',
  template: '<p>child</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})

class ChildComponent implements onChanges{
  @Input() status: boolean;
  doSomething() {
    console.log('I am from child')
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.status) {
        this.doSomething();
    }
  }

}

// PARENT
@Component({
  selector: 'parent-component',
  template: '<child-component [status]="status"></child-component>',
})

class ParentComponent{

  status: boolean;

  ngAfterViewInit() {
    this.status = true;
  }
}
17.07.2019
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]