Angular2は、子イベントの実行時に親コンポーネントにクラスを追加します。

Question

私はAngular2を使用してプロジェクトを進めています。 しかし一方で、私はかなり簡単な仕事がイライラしています。

さて、私は何をしようとしていることは非常に単純です：私のアプリで

私はヘッダコンポーネント（すべてのアプリを通じて再利用可能）と検索バーコンポーネントを持っています。

ヘッダーコンポーネントは以下のようになります。

import {Component, Input} from '@angular/core'; 
import {IONIC_DIRECTIVES} from 'ionic-angular'; 
import {SearchBar} from './../../component/search/search.component'; 

@Component({ 
    selector  : 'med-header', 
    templateUrl  : 'build/component/header/header.component.html', 
    directives  : [IONIC_DIRECTIVES, SearchBar] 
}) 

export class Header { 
    @Input() 
    showLogo : number; 
    /** 
    * constructor 
    */ 
    constructor(){ 
    } 
}; 

テンプレート：

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     <img *ngIf="showLogo" src="build/assets/images/logo.png" id="main-logo" /> 
    </ion-title> 
    <div id="search-box"><med-search></med-search></div> 
    </ion-navbar> 
</ion-header> 

と検索バーコンポーネント：

import {Component} from '@angular/core'; 
import {IONIC_DIRECTIVES} from 'ionic-angular'; 
import {NavController} from 'ionic-angular'; 

@Component({ 
    selector  : 'med-search', 
    templateUrl  : 'build/component/search/search.component.html', 
    directives  : [IONIC_DIRECTIVES] 
}) 

export class SearchBar { 
    private focused : boolean; 
    private keyword : any; 
    /** 
    * constructor 
    */ 
    constructor(private navCtrl : NavController){ 
    } 

    animateComponent(){ 
     this.focused = true; 
    } 
}; 

そして、検索バーのテンプレート：

<ion-searchbar (ionInput)="getItems($event)" [(ngModel)]="keyword" [ngClass]="{'focused' : focused}" (ionFocus)="animateComponent()"></ion-searchbar> 

私はこの単純なタスクを達成しようとしています

：それはjQueryのであれば、私は、まあ、（例えば、それは幅などだ増加）、ユーザーは検索バーに焦点を当てて、検索バーのコンテナをアニメーション

をかなり簡単にこの作業を達成するでしょう。 angual2では少し複雑に思えます。

私はを使用して、多分考えた：私は私の目標を達成できるホストセレクタを、私は、検索バーがフォーカスされているかどうかを知ることができないだということが分かりました。 私はEventEmitterについても考えましたが、残酷なように聞こえて、期待どおりに動作しませんでした。 クラスを親に適用し、その子コンポーネントをデパンドするクラスはありますか？

誰でもその方法を知っていますか？

ありがとうございました。

Answer 1

まあ、最後に@Outputデコレータを使用して問題を解決しました。

IはsearchBarコンポーネントにchangedFocusプロパティを追加した：

@Output() changedFocus : EventEmitter<boolean> = new EventEmitter<boolean>(); 

、同様に検索バーにイベントハンドラを追加しました：私はfocusedプロパティを追加Header成分に、そして

/** 
    * executed when the form is focused 
    */ 
    focus(){ 
    this.changedFocus.emit(true); 
    } 

    /** 
    * executed when the form is blured 
    */ 
    blur(){ 
    this.changedFocus.emit(false); 
    } 

を：

private focused : boolean; 

そしてchangeFocus方法：

/** 
    * change element focus 
    */ 
    changeFocus(){ 
    this.focused = !this.focused; 
    } 

子コンポーネントに毎回ピントの状態の変更を実行します。 それは私に欲しい結果を与えました。