Question

我正在开发angular 7应用，其设计就像是，我的应用底部有页脚组件，而在内部有ag-grid。

我正在做的是，如果用户执行任何操作（如加载任何数据或加载任何报告），我会在ag-grid中添加新行以显示状态。

我想做的是仅使用该组件的单个实例，该实例可通过外部应用程序使用，如果他们使用DI请求，则应将同一单个对象插入另一个组件。因此，当他们将消息添加到此消息窗口时，所有消息都应添加到同一窗口。

我尝试使用@Injectable但没有运气。

这是代码，我为messageBoxComponent写的...

import { Component, OnInit, Injectable } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-message-box',
  templateUrl: './message-box.component.html',
  styleUrls: ['./message-box.component.css']
})

@Injectable()
export class MessageBoxComponent implements OnInit {

  public newCount = 1;
  public gridOptions: GridOptions;
  constructor() {
    this.gridOptions = <GridOptions>{
      rowData: this.createRowData(),
      columnDefs: this.createColumnDefs(),
      onGridReady: () => {
        this.gridOptions.api.sizeColumnsToFit();
      },
      rowHeight: 30, // recommended row height for material design data grids,
      headerHeight: 30
    };
  }

  ngOnInit() {
  }

  public AddMessage(newrow) {
    var newItem = newrow;
    this.gridOptions.api.updateRowData({ add: [newItem] });
  }

  public PostMessage(message: string, comp: string) {
    var newData = {
      Source: comp,
      Datetime: this.GetCurrentDateTime(),
      Category: "Information",
      Message: message
    };
    this.AddMessage(newData);
  }

  public PostWarning(message: string, comp: string) {
    var newData = {
      Source: comp,
      Datetime: this.GetCurrentDateTime(),
      Category: "Information",
      Message: message
    };
    this.AddMessage(newData);
  }

  public PostError(message: string, comp: string) {
    var newData = {
      Source: comp,
      Datetime: this.GetCurrentDateTime(),
      Category: "Information",
      Message: message
    };
    this.AddMessage(newData);
  }


  private createColumnDefs() {
    return [
      {
        headerName: "Source",
        field: "Source",
        cellEditor: "sliderEditor",
        width: 50,
        cellEditorParams: {
          thumbLabel: true
        }

      },
      {
        headerName: "Datetime",
        field: "Datetime",
        cellEditor: "sliderEditor",
        width: 50,
        cellEditorParams: {
          thumbLabel: true
        }

      },
      {
        headerName: "Category",
        field: "Category",
        cellEditor: "sliderEditor",
        width: 50,
        cellEditorParams: {
          thumbLabel: true
        }

      },
      {
        headerName: "Message",
        field: "Message",
        cellEditor: "sliderEditor",
        cellEditorParams: {
          thumbLabel: true
        }

      }
    ];
  }

  private createRowData() {
    return [
      {
        Source: "HSAS",
        Datetime: this.GetCurrentDateTime(),
        Category: "Information",
        Message: "Application Initilized successfully."
      },

    ];
  }

  private GetCurrentDateTime() {
    var today = new Date();
    var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return date + ' ' + time;
  }
}

html

 <ag-grid-angular style="width: 100%; height: 100px;" class="ag-theme-dark" [gridOptions]="gridOptions">
    </ag-grid-angular>

Gridoption从未在组件中初始化。

Answer 1

您可以将组件声明为entryComponent，这样就可以在不使用HTML声明的情况下创建组件，然后可以使用组件A和组件B之间的共享服务将数据传递给它，因此结果将呈现在您的entryComponent中，该实例仅被实例化一次

角度7

1 个答案: