[英]Angular - How can I toggle the visibility of an element in a component from another component?
I have the following scenario in my Angular app: 我的Angular应用中有以下情形:
A component MainDashboardComponent
that is visible when I have the route /
. 有路线/
时可见的组件MainDashboardComponent
。 Obviously I have the <router-outlet>
tag in my app.component.html
file, which looks like this: 显然,我的app.component.html
文件中有<router-outlet>
标记,如下所示:
<app-side-menu></app-side-menu>
<div class="main-container">
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
As you can see I have a SideMenuComponent
I use to have a side menu on all my routes. 如您所见,我有一个SideMenuComponent
,用于在所有路线上都具有一个侧菜单。 In MainDashboardComponent
I have a method that for some reason needs to toggle a chat element that is situated on the side menu. 在MainDashboardComponent
我有一个方法,由于某种原因,该方法需要切换位于侧面菜单上的聊天元素。 Inside the SideMenuComponent
I have a method that handles the visibility toggle for the chat element and it works as expected. 在SideMenuComponent
内部,我有一个方法可以处理chat元素的可见性切换,并且可以按预期工作。 How can I call this method from my MainDashboardComponent
and toggle the chat element from there? 如何从MainDashboardComponent
调用此方法并从那里切换chat元素?
What I tried with no success 我尝试的没有成功
I tried to inject the SideMenuComponent
inside my MainDashboardComponent
but, though the method toggleChat()
is called, the element doesn't change it's visibility. 我试图注入SideMenuComponent
我里面MainDashboardComponent
但是,虽然方法toggleChat()
被调用时,元素不会改变它的知名度。 Looks like I have a kind of multiple instance of the same component I guess... 看起来我有一个相同组件的多个实例,我猜...
Can you please help me with this? 你能帮我吗? Thank you! 谢谢!
MainDashboardComponent 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 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;
}
}
To communicate between different components, there are different ways. 在不同组件之间进行通信时,有不同的方法。
In your case, we can create a service, myService.ts and declare and eventEmitter 在您的情况下,我们可以创建服务myService.ts并声明和eventEmitter
.service.ts .service.ts
@Injectable()
export class AppCommonService {
toggle : EventEmitter<boolean> = new EventEmitter<boolean>()
}
mainDashboard.component.ts 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 sideMenu.component.ts
constructor(private myService : myService){}
chatStatus : boolean = false;
ngOnInit(){
this.myService.toggle.subscribe(status=>this.chatStatus = status);
}
Generally this is the domain of a service! 通常,这是服务的领域!
Alter SideMenuComponent to: 将SideMenuComponent更改为:
toggleChat() { this.myService.showChat = !this.myService.showChat; }
Alter MainDashboardComponent, also use this.myService.showChat to show / hide your chat window 更改MainDashboardComponent,也使用this.myService.showChat显示/隐藏您的聊天窗口
Service TS 服务TS
@Injectable()
export class MyService{
showCat:boolean = true
}
MainDashboardComponent MainDashboardComponent
toggleChat() {
this.myService.showChat = !this.myService.showChat;
}
SideMenuComponent SideMenuComponent
chatVisiblity = this.myService.showCat //<-- bind this to the element attribute
You could efficiently use child to parent communication in this scenario. 在这种情况下,您可以有效地利用孩子与父母进行沟通。 You'll need to create a custom event using angular's EventEmitter in your SideMenuComponent and use it in your MainDashboardComponent . 你需要使用角度的EventEmitter在SideMenuComponent创建自定义事件,并在您MainDashboardComponent使用它。
So, here is some code that may help you - 因此,这是一些可以帮助您的代码-
// 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);
}
}
Refer these tutorials if required - 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 如果需要,请参考这些教程-https: //dzone.com/articles/understanding-output-and-eventemitter-in-angular,https : //angular-2-training-book.rangle.io/handout/components/app_structure/ responseing_to_component_events.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.