Блог

У меня есть компонент в angular, который находится в app.component.html (компонент FAQ). Это находится рядом с моей розеткой маршрутизатора следующим образом:

 <div class="site-container">
  <router-outlet></router-outlet>
  <app-callback></app-callback>
  <app-faq></app-faq>
</div>
 

Одним из маршрутов является …/question, который является компонентом вопроса. При ответе на вопрос этот компонент (с нажатием кнопки) Я хотел бы изменить значение переменной в компоненте FAQ.

 answerQuestion(id: string) {
    // Answer question coding...
    faq.faqDisplay = false;
  }
 

Это изменит объявленную переменную в компоненте FAQ на false

 export class FaqComponent implements OnInit {
  faqDisplay = true;
}
 

Сначала я подумал, что лучшим способом сделать это может быть @Input() или @Output() , но поскольку эти компоненты являются параллельными, а не родительскими и дочерними, или наоборот, я думаю, именно поэтому я не могу заставить этот подход работать.

Я могу найти множество статей о передаче данных от родителя к потомку и т. Д., Но не могу найти ничего для параллельного общения — есть ли способ сделать это или, может быть, обойти?

Лучший способ сделать это — использовать rxjs . Создайте Injectable , в котором у вас будет Subject примерно так:

 @Injectable()
export class YourService {

    public $faqHasChanged = new Subject<void>();

}
 

В компоненте, в котором вы отвечаете на вопрос, отправьте событие, подобное этому:

 @Component
export class YourSenderComponent {

    constructor(
        private service: YourService,
    ) {}

    answerQuestion(id: string) {
        // Answer question coding...
        faq.faqDisplay = false;
        this.service.$faqHasChanged.next();
    }

}
 

В компоненте, в котором вы хотите получить информацию, измененную в FAQ, сделайте так:

 @Component
export class YourReceiverComponent implements OnInit {

    faqDisplay = true;

    constructor(
        private service: YourService,
    ) {}

    public ngOnInit() {
        this.service.$faqHasChanged.subscribe(() => {
            this.faqDisplay = false;
        });
    }

}
 

Таким образом, вы также можете получать это обновление в любом месте вашего приложения, и вы можете обновлять интерфейс по своему усмотрению.

Подробнее о rxjs читайте здесь, чтобы вы могли улучшить его по своему усмотрению.

В Angular существует множество различных способов взаимодействия между родственными компонентами,

Использование общего сервиса между компонентами и использование rxjs путем открытия потока Subject :

 export class sharedService{
  private faqDisplay= new Subject<boolean>(); // source
  faqDisplay$ = this.faqDisplay.asObservable(); // stream
}

 

 @Component
export class sibling1{

    constructor(
        private service: sharedService,
    ) {}

    answerQuestion(id: string) {
        // Answer question coding...
        faq.faqDisplay = false;
        this.service.faqDisplay.next(faq.faqDisplay);
    }

}
 

 @Component
export class sibling2{

faqDisplay: boolean;

    constructor(
        private service: sharedService,
    ) {}

      public ngOnInit() {
        this.service.faqDisplay$.subscribe((value) => {
            this.faqDisplay = value;
        });
    }
}