Question

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

嗯，我想要做的很简单：

在我的应用中，我有标题组件（可通过所有应用重用）和搜索栏组件。

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，但这听起来像是一种矫枉过正，并且没有按预期工作。无论如何都要将一个类应用于父级，并将其放在子组件上？

有谁知道怎么做？

感谢。

Answer 1

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

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

@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在子事件执行时向父组件添加类

1 个答案: