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>

正如您所看到的，我有一个if语句，具体取决于showGrid属性。现在这是我的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
  }
}

Topbar 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

您只需要为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;
    }
}

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

将操作发送到父组件Angular2

1 个答案: