Angular2在子項目執行時向父組件添加類

我正在使用Angular2開發項目，直到現在發現它真棒！但另一方面，我發現一些非常簡單的任務令人沮喪。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的，我將很容易地完成這項任務。在angualr2中它似乎有點複雜。

我想，也許使用：主機選擇，我可以實現我的目標，但發現，我無法知道，如果搜索欄集中與否。我也考慮過EventEmitter，但它聽起來像是一種矯枉過正，並沒有像預期的那樣工作。有沒有辦法將一個類應用於父項，並將其放在它的子項上？

有誰知道該怎麼做？

謝謝。

來源

2016-08-03 MorKadosh

難道你不完全用CSS3過渡嗎？ – pixelbits

@pixelbits井ufcourse我試過了。但我不知道任何工作技術來引用某個元素的父項。因此，當兒童輸入被關注時，我無法改變父母。 – MorKadosh

那麼，我最終解決了這個問題，使用@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組分I添加focused屬性：

private focused : boolean;

並有changeFocus方法：這是執行每次子組件上的對焦狀態變化

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

。這給了我想要的結果。

來源

2016-08-04 09:05:37 MorKadosh

Angular2在子項目執行時向父組件添加類

回答

相關問題