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>

如何在2个组件Angular 2之间共享触发器

2 个答案: