如何将一个按钮单击功能调用到另一个组件？答案

【问题标题】：How to call one button click function to another component?如何将一个按钮单击功能调用到另一个组件？
【发布时间】：2017-03-16 19:17:06
【问题描述】：

这是我在dashboard.html中的三个组件

<top-nav></top-nav>
<sidebar-cmp></sidebar-cmp>
<section class="main-container" [ngClass]="{sidebarPushRight: isActive}">   
  <router-outlet></router-outlet>
</section>

这里是sidebar.html

<button type="button" class="btn btn-primary menu-icon" (click)="toggleMenu()"><i class="fa fa-bars"></i></button>
 <nav class="sidebar" [ngClass]="{sidebarPushRight: isActive, sidebarHide: isHide}">
 <ul class="list-group">
    <a routerLink="/dashboard/home" [routerLinkActive]="['router-link-active']" class="list-group-item">
        <i class="fa fa-fw fa-home"></i> Home
    </a>
  </ul>
<nav>

这里是 sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Auth } from '../../login/auth.service';
import { Menu } from '../../webapi/model/models';
import { User } from '../../webapi/model/models';
import * as _ from 'lodash';

@Component({
moduleId: module.id,
selector: 'sidebar-cmp',
templateUrl: 'sidebar.html',
styleUrls: ['sidebar.css']
})

export class SidebarComponent implements OnInit {
 isHide = false;
 public toggleMenu(){
    this.isHide = !this.isHide;
  }
}

我在 sidebar.html 中有一个按钮，如果我单击 sidebar.html 中的菜单图标按钮，我想将一个 ngClass 添加到dashboard.html 中的主容器类。请任何人帮助解决这个问题。提前致谢。

【问题讨论】：

通常你可以通过EventEmitter 输出来做到这一点，但在你的情况下，你在出口之外，所以你必须创建一个全局EventEmitter 并且通过它你可以实现这个
我对 EventEmitter 没有足够的了解。您能否提供任何示例示例。
查看此链接stackoverflow.com/questions/42624053/…
谢谢兄弟。你对这个问题给出了很好的建议。再次感谢。

标签： angular typescript

【解决方案1】：

使用EventEmitter和双向数据绑定isActive属性

<sidebar-cmp [(isHide)]="isActive"></sidebar-cmp>


export class SidebarComponent implements OnInit {
 @Input() isHide: boolean = false;
 @Output() isHideChange: EventEmitter = new EventEmitter();
 public toggleMenu(){
    this.isHide = !this.isHide;
    this.isHideChange.emit(this.isHide);
  }
 }

【讨论】：

【解决方案2】：

使用@Output 装饰器：

export class SidebarComponent implements OnInit {
 isHide = false;
  @Output() onActivate = new EventEmitter(); 
 public toggleMenu(){
    this.isHide = !this.isHide;
    onActivate.emit(!this.isHide);
  }
 }


export class DashBoardComponent implements OnInit {
 isActive= false;
  @Output() onActivate = new EventEmitter(); 
 public onActivate(isActive){
    this.isActive= isActive;
  }
 }

html:

 <sidebar-cmp (onActivate)="onActivate($event)"></sidebar-cmp>

【讨论】：