Угловой - Как я могу переключить видимость элемента в компоненте из другого компонента?

Question

В моем приложении Angular есть следующий сценарий:

Компонент MainDashboardComponent, который отображается, когда у меня есть маршрут /.Очевидно, в моем файле app.component.html есть тег <router-outlet>, который выглядит следующим образом:

<app-side-menu></app-side-menu>
<div class="main-container">
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

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

Что я пытался безуспешно

Я пытался ввести SideMenuComponent внутри моего MainDashboardComponent, но, хотя метод toggleChat() вызывается, элемент не меняет свою видимость.Похоже, у меня есть несколько экземпляров одного и того же компонента, я думаю ...

Не могли бы вы помочь мне с этим?Спасибо!

Компонент MainDashboard

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-dashboard',
  templateUrl: './main-dashboard.component.html',
  styleUrls: ['./main-dashboard.component.scss']
})
export class MainDashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

  setFocus(id) {
    // here I'd like to call SideMenuComponent togglechat() ... 
  }
}

SideMenuComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss']
})
export class SideMenuComponent implements OnInit {

  showChat: boolean;

  constructor() {
    this.showChat = false;
  }

  ngOnInit() {
  }

  toggleChat() {
    this.showChat = !this.showChat;
  }

}

Answer 1

В этом сценарии вы можете эффективно использовать связь между родителями.Вам нужно создать пользовательское событие, используя EventEmitter angular в вашем SideMenuComponent и использовать его в MainDashboardComponent .

Итак, воткод, который может вам помочь -

// SideMenuComponent
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.scss']
})
export class SideMenuComponent implements OnInit {
    @Output() valueChange = new EventEmitter();
    showChat: boolean;

    constructor() {
        this.showChat = false;
    }

    ngOnInit() {
    }

    toggleChat() {
        this.showChat = !this.showChat;
        this.valueChange.emit(this.showChat);
    }

}

// MainDashboardComponent
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-main-dashboard',
    template: `<app-side-menu (valueChange)='setFocus($event)'></app-side-menu>`
    styleUrls: ['./main-dashboard.component.scss']
})
export class MainDashboardComponent implements OnInit {

    constructor() { }

    ngOnInit() { }

    setFocus(event) {
        // check for required input value 
        console.log(event);
    }
}

При необходимости обратитесь к этим учебникам - https://dzone.com/articles/understanding-output-and-eventemitter-in-angular, https://angular -2-training-book.rangle.io / handout /components / app_structure / responseding_to_component_events.html

Answer 2

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

• Если вы хотите установить связь между родительским и дочерним компонентом, вы можете использовать EventEmitter для передачи события из дочернего компонента.и обработать событие в родительском компоненте
• . Если вы хотите установить связь между любыми компонентами, вы можете использовать Сервис и реализовать связь с помощью EventEmitter или * 1012.* Subject / BehaviorSubject

В вашем случае мы можем создать сервис myService.ts и указать и eventEmitter

.service.ts

@Injectable()
export class AppCommonService {

 toggle : EventEmitter<boolean> = new EventEmitter<boolean>()

}

mainDashboard.component.ts

constructor(private myService : myService){}

chatStatus : boolean = false;
ngOnInit(){
 this.myService.toggle.subscribe(status=>this.chatStatus = status);
}

toggleChat(){
 this.myService.toggle.emit(!this.chatStatus);
}

sideMenu.component.ts

constructor(private myService : myService){}

chatStatus : boolean = false;

ngOnInit(){
  this.myService.toggle.subscribe(status=>this.chatStatus = status);
}

Answer 3

Обычно это домен службы!

• Просто создайте службу и добавьте свойство "showCat".
• Вставьте службу в оба компонента

• Измените SideMenuComponent на:

  toggleChat() {
      this.myService.showChat = !this.myService.showChat;
  }
  

• Измените MainDashboardComponent, также используйте this.myService.showChat , чтобы показать / скрыть окно чата

Сервис TS

@Injectable()
export class MyService{
  showCat:boolean = true
}

MainDashboardComponent

toggleChat() {
   this.myService.showChat = !this.myService.showChat;
}

SideMenuComponent

chatVisiblity = this.myService.showCat //<-- bind this to the element attribute