如何調用一個按鈕點擊功能到另一個組件？

這是我在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

如何調用一個按鈕點擊功能到另一個組件？

回答

相關問題