Javascript 将操作发送到父组件Angular2

我有两个组件，一个是

顶栏

，第二个是

显示

，它们是：

显示：

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 HTML：

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

---

正如您所看到的，我有一个函数

toggleGrid

此函数用于切换

显示

属性

showGrid

；然而，我似乎找不到一个方法来完成这件事。由于

Topbar

是

Display

的一个指令，我无法将

Display

注入

Topbar

。我尝试过创建一个服务，但问题是它不会更新

显示

showGrid

属性

有两种方法：

1.

您只需为

组件定义一些

切换网格

事件（输出属性），然后在

显示

组件中收听它。看

---

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

您没有设计问题吗？我会将topbar和display视为兄弟，并在父组件中使用它们。

display

是

topbar

的父组件，因此可以使用

@Host（）

将其注入。这对我来说很有效。但是你能解释一下在这次事件中如何传递一些数据吗？UPD。查找答案：（切换网格）=“切换网格（$event）”

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
  }
}

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

@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;
    }
}

@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;
    }
}