角度7的可注射組件

Question

我正在開發angular 7應用，其設計就像是，我的應用底部有頁腳組件，而在內部有農業網格的頁腳中。

我正在做的是，如果用戶執行任何操作（如加載任何數據或加載任何報告），我將在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將僅實例化一次