Question

我使用angular-gridster2为我的angular应用程序实现了小部件。

代码就像这样：

  <div class="options-header">
    <button  color="accent" (click)="pushItem()" class="add-button cols-2">
      Resize first item and push others
    </button>
    <button (click)="addItem()" class="add-button cols-2">
     add
    </button>
  </div>
<gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
      <div class="button-holder">
        <button (mousedown)="removeItem($event, item)"
                (touchstart)="removeItem($event, item)">
          delete
        </button>
        <ng-container *ngComponentOutlet="item.widgetComponent"> </ng-container>
      </div>
    </gridster-item>
  </gridster>

和grid.ts

import { HelloWorldComponent } from './../hello-world/hello-world.component';
import { Component, OnInit, ViewChild, AfterViewInit, OnChanges } from '@angular/core';
import { GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2';

@Component({
  selector: 'app-gridster',
  templateUrl: './gridster.component.html',
  styleUrls: ['./gridster.component.css']
})
export class GridsterComponent implements OnInit, AfterViewInit {
    options: GridsterConfig;
    dashboard: Array<GridsterItem>;
    itemToPush: GridsterItemComponent;

    @ViewChild(HelloWorldComponent) helloWorldComponent: HelloWorldComponent;

    static itemChange(item, itemComponent) {
        console.log('itemChanged', item, itemComponent);
      }

      static itemResize(item, itemComponent) {
        console.log('itemResized', item, itemComponent);
      }
  constructor() { }

  ngOnInit() {
    this.options = {
        draggable: {
            enabled: true
          },
        itemChangeCallback: GridsterComponent.itemChange,
        itemResizeCallback: GridsterComponent.itemResize,
      };

      this.dashboard = [
        {cols: 2, rows: 1, y: 0, x: 0, widgetComponent: HelloWorldComponent},
        {cols: 2, rows: 2, y: 0, x: 2, widgetComponent: HelloWorldComponent}
      ];
  }

  changedOptions() {
    this.options.api.optionsChanged();
  }

  removeItem(item) {
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  addItem() {
    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1});
  }
  initItem(item: GridsterItem, itemComponent: GridsterItemComponent) {
    this.itemToPush = itemComponent;
  }

  ngAfterViewInit() {
    console.log(this.helloWorldComponent.idAdded);
    if (this.helloWorldComponent.idAdded) {
        alert('asdfasdfasdfa');
    }
  }


}

效果很好，但是我想知道，子组件将值传递给父组件，或者父组件监听子组件的更改。

例如，我有另一个名为helloWorld的组件

<p>
  hello-world works!
</p>
<button (click)="addItem()" class="add-button cols-2">
        add
       </button>

hello world.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
public idAdded: boolean;
  constructor() { }

  ngOnInit() {
      this.idAdded = false;
  }

  addItem() {
    this.idAdded = true;
  }

}

我尝试使用ViewChild方法，但是没有用。我的目标是，如果父母知道或听取子组件中的按钮，则将创建新的小部件。

任何解决方案？

有人可以给我更多吗？

最好的问候，

狮子座

如何在角度gridster2中将值从子组件传递到父组件

0 个答案: