Как передать значение из дочернего компонента в родительский компонент в угловом гридстере2 - PullRequest
Новая
       2

Как передать значение из дочернего компонента в родительский компонент в угловом гридстере2

0 голосов
/ 07 апреля 2019

Я использовал angular-gridster2 для реализации виджета для моего углового приложения.

код выглядит так: 

  <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, но он не работал.моя цель состоит в том, чтобы, если родитель знает или слушает кнопку, которая находится в дочернем компоненте, нажата, будет создан новый виджет.

какие-нибудь решения?

Может кто-нибудь показать мне больше?

С наилучшими пожеланиями,

Лев

...