如何在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>

The problem is that i don't know how to share the trigger between components, the trigger button is in form component and the div that needs to appear is in search component

Answer 1

You should use an Output in your form component to send the event in your upper view, and implement a method in this view which would update a flag which is an input of SearchComponent, for example. This input would be used by SearchComponent do display or not the div.

Answer 2

This is my Code

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>