Angular2 在子事件执行时将 class 添加到父组件

Question

我正在使用 Angular2 开发一个项目，直到现在才发现它很棒！但另一方面，我发现一些非常简单的任务令人沮丧。

嗯，我想做的很简单：

在我的应用程序中，我有一个 header 组件（可在所有应用程序中重复使用）和一个 search-bar 组件。

Header 组件如下所示：

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，我会很轻松地完成这个任务。在angualr2里面好像有点复杂。

我想也许使用 :host 选择器我可以实现我的目标，但发现我无法知道是否搜索栏是否聚焦。我也考虑过 EventEmitter，但这听起来有点矫枉过正，而且它没有按预期工作。有没有办法根据它的子组件将 class 应用于父组件？

有人知道怎么做吗？

谢谢。

Answer 1

好吧，我终于使用 @Output 装饰器解决了这个问题。

我在 searchBar 组件中添加了一个 changedFocus 属性：

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

并且还在搜索栏中添加了事件处理程序：

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

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

然后，在 Header 组件中我添加了一个 focused 属性:

private focused : boolean;

还有一个changeFocus方法：

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

每次子组件上的焦点状态发生变化时执行。这给了我想要的结果。

Angular2 在子事件执行时将 class 添加到父组件

Angular2 add class to parent component on child event execution

typescript

angular2-template

angular