发送动作父组件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; 
    } 
} 

就个人而言，我更喜欢第一种方法，因为它使你的应用程序的数据流量将更加明确。