Как условно сделать http вызов в ngOnInit

Question

У меня есть угловой компонент с кнопками, которые выполняют действия и изменяют свойства ввода с привязкой к данным.

Когда компонент инициализируется, в ngOnInit я хочу сделать http get вызов и затем обработать результат.

Когда пользователь впоследствии нажимает кнопку, которая изменяет несколько входных данных, привязанных к даннымСвойства, однако, я хочу повторно визуализировать компонент / шаблон / представление, но в этом случае я не хочу делать вызов http get. Я хочу сделать вызов http get только при первом открытии компонента или после отправки формы в компоненте.

Концептуально, к чему я стремлюсь:

details.component.ts

ngOnInit() {

data: Object;

if (certainUserButtonsWereClicked) {
   renderView();
} else {
   makeHttpGetCall.subscribe(data=>{this.data=data;renderView()});
}

Какие условия я проверяю, чтобы определить значение certainUserButtonsWereClicked? Нужно ли использовать ngOnChanges и проверить объект SimpleChanges, чтобы увидеть, были ли и / или какие изменения были внесены, или есть более простой / лучший способ?

Answer 1

Вы должны попробовать функциональность сервиса angular и получить вызов API с помощью сервиса, а также сделать событие одним щелчком мыши на html-странице, которое связывается с файлом componentet.ts, и после этого события клика сделать вызов API с помощью сервиса, и он вернется к компоненту, где выподписаться на эти данные API. И поместите эту функцию компонента в ngOnInit следующим образом. (Имя функции). Поэтому, когда вы нажимаете кнопку или открываете эту страницу, всегда вызывается функция ngOnInit, и вы получаете нужные данные, как хотите, надеюсь, это поможет вам.

Answer 2

Теперь я действительно запутался. Приведенный ниже код на самом деле не работает с моими формами, потому что мой компонент не имеет привязанных к данным свойств ввода. Я не уверен, стоит ли мне «искусственно» добавлять привязанные к данным свойства ввода для запуска ngOnChanges? Я вернулся на площадь 1, и мне придется повторить мой вопрос. ,,

=====

Во-первых, извиняюсь за то, что не сформулировал мой вопрос более четко. После дальнейших исследований, я думаю, что единственный способ сделать то, что я хочу сделать, это использовать OnChanges, но хорошая новость в том, что это было не так сложно, как я ожидал. На самом деле это довольно просто. Вот как я реализовал код:

details.component.ts

export class DetailsComponent implements OnInit, OnChanges  {
doGet: boolean = true;
data: any[] = [];

 ngOnChanges(chg: SimpleChanges){
    if (chg.doGet.previousValue === false) {

// When user clicks button, "doGet" property is set to false in the (click) event 
// handler. On re-rendering, it's initialized to "true", so we need
// to reference the previous value, and set it back to "false"

   this.doGet = false;  

// We also need to re-set our key data to the updated version of the old data
// rather than re-fetching the data using HTTP GET

   this.data = chg.data.previousValue;  

   }

 }

  ngOnInit() {
    if (this.doGet) {
      this.member.getDetailsForm(this.userID).subscribe((data)=>{  // Perform HTTP GET
        this.data = data;
        this.renderDataArray();
      })
    } else this.renderDataArray();