Question

我的Angular应用中有以下情形：

当我有路线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内部，我有一个方法可以处理chat元素的可见性切换，并且可以按预期工作。如何从MainDashboardComponent调用此方法并从那里切换聊天元素？

我尝试的没有成功

我试图将SideMenuComponent注入我的MainDashboardComponent内，但是尽管调用了方法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;
  }

}

Answer 1

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

如果要在父组件和子组件之间进行通信，可以使用 EventEmitter 从子组件中发出事件并在父组件中处理该事件
如果要在任何组件之间进行通信，可以使用 Service 并在 EventEmitter 或 Subject / BehaviorSubject < / li>

在您的情况下，我们可以创建服务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 2

通常这是服务的领域！

只需创建服务并添加“ 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

Answer 3

在这种情况下，您可以有效地利用孩子与父母进行交流。您需要在 SideMenuComponent 中使用angular的 EventEmitter 创建自定义事件，并在 MainDashboardComponent 中使用它。

因此，以下代码可能对您有帮助-

"KeyVaultSecret": {
  "reference": {
    "keyVault": {
      "id": "/subscriptions/214124-1241-526-645-lele/resourceGroups/KEYVAULT-RG/providers/Microsoft.KeyVault/vaults/KeyVault"
    },
    "secretName": "VerySecret"
  }
}

如果需要，请参考这些教程- 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

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

3 个答案: