запуск метода других компонентов после успешного вызова API в angular9

#angular #rxjs

#angular #rxjs

Вопрос:

После успешного вызова api мне нужно отправить уведомление из ts-файла для запуска другого метода компонента продукта, вместо вызова метода из шаблона. пожалуйста, найдите приведенный ниже код

componentone.ts

  export class CustomComponentOne extends Component2 implements OnDestroy {
    
      constructor(router: Router, renderer: Renderer2, elemRef: ElementRef, protected someLogoutService: LogoutService) {
        super(router, renderer, elemRef);
      }
    
      ngOnDestroy(): void {
        super.ngOnDestroy();
      }
    
      testMethod(): void {
        this.someLogoutService.performCustomLogout().subscribe((response) => {
          if (response.status === 200) {
            localStorage.clear()      
    }
        });
      }
    

    productcomponent

 export class changeProductComponent extends productcomponent implements OnInit {
    
      protected authService: AuthenticationService;
      constructor(authService: AuthenticationService, userService: UserService) {
        super(authService, userService);
        this.authService = AuthenticationService;
      }
    
      ngOnInit(): void {
        super.ngOnInit();
      }
    
    
    
        methodToCall(): string {
       
          return this.customLoginAdapter.getCustomLoginUrl();
        
      }

producntcomponent.htm

 <p ngIf="methodToCall()">testprod</p>
  

вместо вызова methodTocall из шаблона, есть ли какой-либо другой способ вызова из файла componentone.ts. я пробовал использовать @output event emitter, но это не помогло, потому что компонент продукта находится в родительской директиве (он содержит много дочерних директив), мы не можем ее настроить. можем ли мы достичь этого любым другим способом, например, с помощью subject. пожалуйста, помогите мне решить эту проблему

Ответ №1:

для этого вы можете использовать behaviorsubject

stackblitz

behaviorsubject

Ответ №2:

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

Создайте службу, которая имеет общедоступное свойство типа subject.

  • Внутри подписки performMDCIMLogout в пользовательском компоненте вызывается service.subjectProperty.next(значение).
  • Внутри changeProductComponent подписаться на service.subjectProperty и вызвать методtocall

Документы: https://www.learnrxjs.io/learn-rxjs/subjects/subject https://angular.io/guide/singleton-services

Пример (предоставлен Тони): stackblitz

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

1. можете ли вы дать мне фрагмент кода. тогда это должно помочь

2. Тони предоставил необходимый вам stackblitz. Пожалуйста, обратите внимание на оба ответа 🙂

3. Разница между BehaviourSubject и Subject заключается в том, что BehaviourSubject имеет начальное значение.