如何在2個組件之間共享觸發器Angular 2

Question

form.components.ts

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

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

@Component({
    selector:'search',
    templateUrl: 'assets/template/search.html',
})
export class SearchComponent{
}

search.html

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

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

Answer 1

您應該在表單組件中使用Output來在上方視圖中發送事件，並在該視圖中實現一個方法，該方法將更新作為SearchComponent輸入的標志。 此輸入將由SearchComponent使用，而不顯示div。

Answer 2

這是我的代碼

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>