Fatal编程技术网
  • javascript/
  • Javascript 角度-如何从另一个组件切换组件中元素的可见性？

Javascript 角度-如何从另一个组件切换组件中元素的可见性？

javascript angular

Javascript 角度-如何从另一个组件切换组件中元素的可见性？,javascript,angular,angular-components,Javascript,Angular,Angular Components,我的Angular应用程序中有以下场景： 一个组件main仪表板组件，当我有路线时可见。显然，我在我的app.component.html文件中有标记，如下所示： <app-side-menu></app-side-menu> <div class="main-container"> <div class="content"> <router-outlet></router-outlet> </div&

我的Angular应用程序中有以下场景：

一个组件
main仪表板组件
，当我有路线时可见。显然，我在我的
app.component.html
文件中有
标记，如下所示：

<app-side-menu></app-side-menu>
<div class="main-container">
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>
侧菜单组件

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() ... 
  }
}

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;
  }

}
通常这是一个服务的领域

  • 只需创建一个服务并添加“showCat”属性
  • 将服务注入两个组件中
  • 将SideMenuComponent更改为：

    toggleChat() {
    this.myService.showChat = !this.myService.showChat;
}
  • 除了MainDashboardComponent，还可以使用this.myService.showChat显示/隐藏聊天窗口

服务TS

主仪表板组件

SideMenuComponent

chatVisiblity=this.myService.showCat/通常这是服务的域


    

  • 只需创建一个服务并添加“showCat”属性
    • 

  • 将服务注入两个组件中
    • 

  • 将SideMenuComponent更改为：
    

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

    

    • 

  • 除了MainDashboardComponent，还可以使用this.myService.showChat显示/隐藏聊天窗口
    • 


服务TS

主仪表板组件

SideMenuComponent


chatVisiblity=this.myService.showCat/在这种情况下，您可以有效地使用子级到父级的通信。您需要在SideMenuComponent中使用angular的EventEmitter创建自定义事件，并在MainDashboard组件中使用它

因此，这里有一些代码可以帮助您-


// 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);
    }
}



//SideMenuComponent
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“应用程序端菜单”，
templateUrl:'./side menu.component.html'，
样式URL:['./侧菜单.component.scss']
})
导出类SideMenuComponent实现OnInit{
@Output（）valueChange=neweventemitter（）；
showChat:boolean；
构造函数（）{
this.showChat=false；
}
恩戈尼尼特（）{
}
toggleChat（）{
this.showChat=！this.showChat；
this.valueChange.emit（this.showChat）；
}
}
//主仪表板组件
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“应用程序主仪表板”，
模板：`，



在这种情况下，您可以有效地使用子级到父级的通信。您需要在SideMenuComponent中使用angular的EventEmitter创建自定义事件，并在MainDashboard组件中使用它

因此，这里有一些代码可以帮助您-


// 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);
    }
}



//SideMenuComponent
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“应用程序端菜单”，
templateUrl:'./side menu.component.html'，
样式URL:['./侧菜单.component.scss']
})
导出类SideMenuComponent实现OnInit{
@Output（）valueChange=neweventemitter（）；
showChat:boolean；
构造函数（）{
this.showChat=false；
}
恩戈尼尼特（）{
}
toggleChat（）{
this.showChat=！this.showChat；
this.valueChange.emit（this.showChat）；
}
}
//主仪表板组件
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“应用程序主仪表板”，
模板：`，



要在不同组件之间进行通信，有不同的方法


    

  • 如果要在父组件和子组件之间通信，可以使用EventEmitter从子组件发出事件，并在父组件中处理事件
    • 

  • 如果您想在任何组件之间进行通信，可以使用服务并借助事件发射器或主题/行为主题
    • 


在您的情况下，我们可以创建一个服务myService.ts和declare和eventEmitter

.service.ts


@Injectable()
export class AppCommonService {

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

}



constructor(private myService : myService){}

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

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



constructor(private myService : myService){}

chatStatus : boolean = false;

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


侧菜单.component.ts


@Injectable()
export class AppCommonService {

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

}



constructor(private myService : myService){}

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

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



constructor(private myService : myService){}

chatStatus : boolean = false;

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



要在不同组件之间进行通信，有不同的方法


    

  • 如果要在父组件和子组件之间通信，可以使用EventEmitter从子组件发出事件，并在父组件中处理事件
    • 

  • 如果您想在任何组件之间进行通信，可以使用服务并借助事件发射器或主题/行为主题
    • 


在您的情况下，我们可以创建一个服务myService.ts和declare和eventEmitter

.service.ts


@Injectable()
export class AppCommonService {

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

}



constructor(private myService : myService){}

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

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



constructor(private myService : myService){}

chatStatus : boolean = false;

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


侧菜单.component.ts


@Injectable()
export class AppCommonService {

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

}



constructor(private myService : myService){}

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

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



constructor(private myService : myService){}

chatStatus : boolean = false;

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



你能为你的主仪表板组件添加完整的代码吗？主仪表板组件是路线之一吗？我更新了我的问题：）你可以将
toggleChat（）
方法设置为static，并在
setFocus（id）{SideMenuComponent.toggleChat（）中
您还可以利用rxjs Behavior Subject为您的主仪表板组件添加完整的代码吗？主仪表板组件是路线之一吗？我更新了我的问题：）您可以将
toggleChat（）
方法设置为静态，并在
setFocus（id）{SideMenuComponent.toggleChat（）
您还可以利用rxjs Behavior Subject的优势—伟大而简单的解决方案！正是我所寻找的！我从来没有遇到过这样的案例，也从来没有想过如何做这种事情，从现在起将牢记在心：）谢谢Sarthak！伟大而简单的解决方案！正是我所寻找的！我从来没有遇到过这样的案例，也从来没有遇到过这样的问题想到如何做这类事情，从现在起就会牢记在心：）谢谢你萨尔萨克！