向父组件 Angular2 发送操作

Question

我有两个组件，一个是 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>

如您所见，我有一个取决于 showGrid 属性的 if 语句。现在这是我的 Topbar 组件：

顶栏：

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。我试过创建服务，但问题是它不会更新 Display showGrid 属性

Answer 1

有两种方法：

1.

您只需要为您的 <toolbar> 组件定义一些 toggle-grid 事件（输出属性），然后在您的 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 and maybe forwardRef to inject parent component into child. See 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;
    }
}

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

向父组件 Angular2 发送操作

Sending action to parent component Angular2

javascript

angular