Angular 7 中的可注射组件答案

【问题标题】：Injectable component in angular 7Angular 7 中的可注射组件
【发布时间】：2019-07-16 21:16:22
【问题描述】：

我正在开发 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 从未在组件中初始化。

【问题讨论】：

标签： javascript angular dependency-injection ag-grid

【解决方案1】：

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

【讨论】：