如何2個部件之間的角共享一個觸發器2

form.components.ts如何2個部件之間的角共享一個觸發器2

import {Component, animate, state, style, trigger, transition} from "@angular/core"; 

@Component({ 
    selector:'form', 
    templateUrl: 'assets/template/form.html', 
    inputs : ['departure','destination'], 
    animations:[ 
     trigger('focusPanel',[ 
      state('inactiv',style({ 
       bottom: '-999px', 
       display: 'none', 
       position: 'fixed', 
       background: '#eee', 
       width: '100%', 
       height: '100%', 
      })), 
      state('activ',style({ 
       bottom: '0px', 
       display: 'block', 
       background: '#eee', 
       position: 'fixed', 
       'z-index' : '2', 
       width: '100%', 
       height: '100%', 
      })), 
      transition('inactiv => activ', animate('600ms ease-in')), 
      transition('activ => inactiv', animate('600ms ease-out')) 
     ]) 
    ] 
}) 
export class FormComponents{ 
    state : string = 'inactiv'; 
    OpenModal(){ 
     this.state = 'activ'; 
    } 
    CloseModal(){ 
     this.state = 'inactiv'; 
    } 
}

form.html

<div class="search-fliht-input" placeholder="Orașul de plecare" id="air-port-from" (click)="OpenModal()"></div>

search.component.ts

search.html

<div class="city-select-container open" [@focusPanel]="state" (click)="CloseModal()"><div>

問題是我不知道如何共享組件之間的觸發器，觸發器按鈕位於表單組件中，需要出現的div位於搜索組件中

來源

2017-09-20 Dan Vrajmas

如何使用SearchComponent？ – RezaRahmati

基本上是一個彈出窗口 –

我需要一些發送[@focusPanel] =「狀態」（點擊）=「formControler.CloseModal（）」從窗體組件到搜索組件 –

您應該在表單中使用輸出組件在上視圖中發送事件，並在此視圖中實現一個方法，例如，該方法將更新一個標誌，該標誌是SearchComponent的輸入。這個輸入將被SearchComponent使用顯示或不使用div。

來源

2017-09-20 14:11:02 Juli3n

這是我的代碼

form.components.ts

import {Component, Output, EventEmitter} from "@angular/core"; 

@Component({ 
    selector:'form', 
    templateUrl: 'assets/template/form.html', 
    inputs : ['departure','destination'] 
}) 
export class FormComponents{ 
    @Output() onOpenModal = new EventEmitter(); 
    TriggerModalEvent(e : any){ 
     this.onOpenModal.emit(e); 
    } 
}

form.html

<div class="search-fliht-input" placeholder="Orașul de plecare" id="air-port-from" (click)="TriggerModalEvent($event)"></div>

search.component.ts

import {Component} from "@angular/core"; 

@Component({ 
    selector:'search', 
    templateUrl: 'assets/template/search.html', 
    animations:[ 
    trigger('focusPanel',[ 
     state('inactiv',style({ 
      bottom: '-999px', 
      display: 'none', 
      position: 'fixed', 
      background: '#eee', 
      width: '100%', 
      height: '100%', 
     })), 
     state('activ',style({ 
      bottom: '0px', 
      display: 'block', 
      background: '#eee', 
      position: 'fixed', 
      'z-index' : '2', 
      width: '100%', 
      height: '100%', 
     })), 
     transition('inactiv => activ', animate('600ms ease-in')), 
     transition('activ => inactiv', animate('600ms ease-out')) 
    ]) 
}) 
export class SearchComponent{ 
    state : string = 'inactiv'; 

    OpenModal(){ 
     this.state = 'activ'; 
    } 

    CloseModal(){ 
     this.state = 'inactiv'; 
    } 
}

search.html

<form (onOpenModal)="OpenModal($event)"></form> 

<div class="city-select-container open" [@focusPanel]="state" (click)="CloseModal()"><div>

來源

2017-09-20 14:46:49

如何2個部件之間的角共享一個觸發器2

回答

相關問題