如何调用一个按钮点击功能到另一个组件？

这是我在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; 
    } 
}

我在sideb中有一个按钮ar.html，如果我点击sidebar.html中的菜单图标按钮，我想添加一个ngClass到dashboard.html中的主容器类。请任何人都帮忙。在此先感谢。

来源

2017-03-16 GCP

通常情况下，你可以通过'EventEmitter做到这一点'输出，但在你的情况下，你在外面的插座，所以你必须创建一个全局的'EventEmitter'并通过你可以达到这个 –

我没有EventEmitter的相关知识。你能否提供任何示例。 – GCP

检查此链接http://stackoverflow.com/questions/42624053/angular-2-how-interact-between-different-level-components/42624414#42624414 –

使用@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>

来源

2017-03-16 10:02:51

感谢兄弟。它的工作现在。 – GCP

使用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); 
    } 
}

来源

2017-03-16 10:06:43 Siva

感谢Siva。它的工作。 – GCP

如何调用一个按钮点击功能到另一个组件？

回答

相关问题