發送動作父組件Angular2

Question

我有2個部件一個是Topbar，第二個是一個Display這裏，他們是：

顯示：

import {Component, View, NgIf} from 'angular2/angular2'; 

import {Topbar} from '../topbar/topbar'; 

@Component({ 
    selector: 'display' 
}) 
@View({ 
    templateUrl: './components/display/display.html', 
    styleUrls: ['./components/display/display.css'], 
    directives: [Topbar, NgIf] 
}) 

export class Display { 
    showGrid: boolean; 

    constructor(){ 
     this.showGrid = true; 
    } 
} 

顯示HTML（對於我的問題很重要）：

<topbar></topbar> 
<div *ng-if="showGrid" class="display-list"> 
    <h1>true</h1> 
</div> 
<div *ng-if="showGrid == false" class="display-list"> 
    <h1>false</h1> 
</div> 

正如你可以看到我有一個if語句取決於showGrid屬性。現在，這裏是我的頂欄組件：

頂欄：

import {Component, View} from 'angular2/angular2'; 
import {ROUTER_DIRECTIVES} from 'angular2/router'; 

@Component({ 
    selector: 'topbar' 
}) 
@View({ 
    templateUrl: './components/topbar/topbar.html', 
    styleUrls: ['./components/topbar/topbar.css'], 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class Topbar { 
    toggleGrid(){ 
    // update Display showGrid property 
    } 
} 

頂欄HTML：

<div (click)="toggleGrid()" class="col-md-1 no-padding grid-toggle"> 
    <img src="assets/imgs/icons/icon-list.svg"> 
</div> 

正如你可以看到我有一個功能toggleGrid這個功能是切換Display財產showGrid;然而，我似乎無法找到一種方法來完成這件事。由於Topbar是Display的指令，我不能將Display注入Topbar。我試圖創建一個服務，但這樣做的問題是，它不更新DisplayshowGrid財產

Answer 1

有兩種方法：

你只需要定義一些toggle-grid事件（輸出屬性）爲您的<toolbar>組件，然後在您的Display組件中聽取它。見this plunker。

@Component({ 
    selector: 'topbar' 
}) 
@View({ 
    template: ` 
    <div (click)="onButtonClick()"> 
     Button 
    </div> 
    ` 
}) 
export class Topbar { 
    @Output() toggleGrid = new EventEmitter(); 

    onButtonClick() { 
    this.toggleGrid.next(); 
    } 
} 

@Component({ 
    selector: 'display' 
}) 
@View({ 
    directives: [Topbar, NgIf], 
    template: ` 
    <topbar (toggle-grid)="toggleGrid()"></topbar> 
    <div *ng-if="showGrid" class="display-list"> 
     <h1>true</h1> 
    </div> 
    <div *ng-if="showGrid == false" class="display-list"> 
     <h1>false</h1> 
    </div> 
    ` 
}) 
export class Display { 
    showGrid: boolean = true; 

    toggleGrid() { 
     this.showGrid = !this.showGrid; 
    } 
} 

2.

使用@Host也許forwardRef注入父組件到孩子。見this plunker

@Component({ 
    selector: 'topbar' 
}) 
@View({ 
    template: ` 
    <div (click)="onButtonClick()"> 
     Button 
    </div> 
    ` 
}) 
export class Topbar { 
    display: Display; 

    constructor(@Host() @Inject(forwardRef(() => Display)) display: Display) { 
    this.display = display; 
    } 

    onButtonClick() { 
    this.display.toggleGrid() 
    } 
} 

@Component({ 
    selector: 'display' 
}) 
@View({ 
    directives: [Topbar, NgIf], 
    template: ` 
    <topbar></topbar> 
    <div *ng-if="showGrid" class="display-list"> 
     <h1>true</h1> 
    </div> 
    <div *ng-if="showGrid == false" class="display-list"> 
     <h1>false</h1> 
    </div> 
    ` 
}) 
export class Display { 
    showGrid: boolean = true; 

    toggleGrid() { 
     this.showGrid = !this.showGrid; 
    } 
} 

就個人而言，我更喜歡第一種方法，因爲它使你的應用程序的數據流量將更加明確。