У меня есть следующий сценарий в моем приложении "Угловое":
Компонент MainDashboardComponent
который отображается, когда у меня есть маршрут /
. Очевидно, что у меня есть <router-outlet>
в моем файле app.component.html
, который выглядит так:
<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()
метод toggleChat()
, элемент не изменяет его видимость. Похоже, у меня есть несколько экземпляров одного и того же компонента, я думаю...
Не могли бы вы мне помочь? Спасибо!
MainDashboardComponent
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;
}
}
Для связи между различными компонентами существуют разные способы.
В вашем случае мы можем создать службу myService.ts и declare и 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);
}
Как правило, это домен сервиса!
Alter SideMenuComponent для:
toggleChat() {
this.myService.showChat = !this.myService.showChat;
}
Alter 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
В этом случае вы могли бы эффективно использовать связь между родителями и родителями. Вам необходимо создать собственное событие с использованием углового EventEmitter в вашем 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/responding_to_component_events.html