Обновить логическое свойство в великом родительском компоненте из великого дочернего компонента в angular

У меня есть компонент Grand Parent, в котором у меня есть кнопка, и на основе некоторого кода я хочу показать/скрыть эту кнопку, поэтому мой код выглядит следующим образом:

grandparent.component.html

 <button
            mat-raised-button
            title = "Send RFP to Suppliers"
            (click) = "RequestForBid()"
            *ngIf = "IsAllSuppliersGetRFP"           
 >

и grandparent.component.ts

 this.IsAllSuppliersGetRFP=!this.SetSendButton();

и метод SetSendButton следующим образом:

     SetSendButton() {
    let all_supplier_request_recived=true;
    this.quoteDTO.lineitems.forEach(x=>{
      x.item_quantity.forEach(y=>{
         y.quote_lineitem_rfp.forEach(z=>{
           z.rfp_suppliers.forEach(a=>{
              if (!a.is_request_for_bid)
               {
                all_supplier_request_recived=a.is_request_for_bid;                
               }
           })
         })
      })
    });
    return all_supplier_request_recived;
  }

теперь у меня есть еще один дочерний компонент, а в дочернем компоненте у меня есть еще один большой дочерний компонент, этот компонент открывается как всплывающее окно в родительском окне. При закрытии этого всплывающего окна я хочу установить для этого поля Grand Parent IsAllSuppliersGetRFP значение true.

Я не уверен, как я могу получить это свойство от великого родителя к внуку и установить его. Я знаю о вводе и выводе, но поскольку это внуки, поэтому я не хочу переходить между Grand Parent -> Parent -> grand child.

Я также читал об услугах для передачи значений между несколькими компонентами, но я не уверен, как я могу получить this.quoteDTO в классе обслуживания?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
296
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я также читал об услугах для передачи значений между несколькими компоненты

Да, вы можете сделать это с помощью нижеприведенного подхода.

В общем сервисе добавить предметную переменную

public quoteSubject: Subject<any> = null;

public notifyWithType(type: string, message: any = null) {
   this.quoteSubject.next({ type: type, text: message });
}

при закрытии всплывающего окна установите значение здесь.

this.sharedService.notifyWithType("all_suppliers_getRFP", 'boolean value' or 'DTO');

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

ngOnInit() {
  this.sharedService.quoteSubject.subscribe(result => {
      if (result.type === 'all_suppliers_getRFP') {
        this.setAllSuppliers(result.text);
      }
  });
}

setAllSuppliers(value: any) {
   // sent object (DTO or boolean)
   this.quoteDTO = value;
   this.IsAllSuppliersGetRFP = // 'value from DTO' as boolean;
}

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

Удачного кодирования .. :)

Другие вопросы по теме