广播菜单显示/隐藏参数 - Angular 5

时间:2018-02-03 06:59:11

标签: html5 angular typescript

我想在选择菜单项时隐藏菜单栏。当我选择联系人菜单时,在构造函数中,我发出关闭值。但我不知道在哪里以及如何收到它。

enter image description here 联系组件在这里

 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import {Http} from '@angular/http';

 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.css']
 })

 export class ContactComponent {

   @Output() emitClass = new EventEmitter<boolean>();

   constructor(private http: Http) {
      this.emitClass.emit(false);
   }

  }

Container html

   <div class='container-fluid'>
<div class='row'>
    <div class='col-12 x-content'>
            <ui-view name='page'>
                <app-search></app-search>
            </ui-view>
    </div>
    <div class='col-4 x-menu' *ngIf="menuShow" >
            <app-menu></app-menu> 
    </div>
</div>  
 </div>

联系UIRef

export const contactState = {
  name: 'contact',
  url: '/contact',
 views: { 
   page : { 
    component: ContactComponent 
   }
 }
   };

1 个答案:

答案 0 :(得分:0)

在您使用app-contact组件的另一个组件中,您可以在该标记中侦听该事件。例如

<my-container>
   <app-contact (emitClass)="yourFunction($event)"></app-contact>
</my-container>

my-container的组件中,您需要创建该函数并在EventEmitter发出内容时实现事件数据

@Component({
   selector: 'my-container',
   ...
})
export class MyContainer {

   public yourFunction(data) {

   }

}