如何正确地以角度2将数据从组件传递到另一个组件

Question

I have these codes:

moduleOne.component.ts:

@Component({
  selector: 'one',
  templateUrl: './moduleOne.component.html'
})


export class ModuleOneComponent {

  private ag: AgGridModel;

  private columnDefs = [    
    {headerName: "Sport", field: "sport", width: 110, suppressMenu: true},
    {headerName: "Gold", field: "gold", width: 100, suppressMenu: true},
    {headerName: "Silver", field: "silver", width: 100, suppressMenu: true},
    {headerName: "Bronze", field: "bronze", width: 100, suppressMenu: true},
    {headerName: "Total", field: "total", width: 100, suppressMenu: true}
  ];

  constructor(){
    this.ag.id = "one";
    this.ag.tableName = "module one";
    this.ag.colDefs = this.columnDefs;

    // Define delegate button
    var delegateBtn = new buttonModel(
      'delegateId',
      'Delegate',
      'glyphicon icon-arrow_right',
      this.delegateJob
    ) ;

    // Define print button
    var printBtn = new buttonModel(
      'printId',
      'Print',
      'glyphicon print',
      this.printJob
    );

    this.ag.gridButtons.push(printBtn);
    this.ag.gridButtons.push(delegateBtn);
  }


  private delegateJob() {

    // TODO: call delegateModal
    return;
  }

  private printJob() {

    // TODO: call delegateModal
    return;
  }
}

moduleOne.component.html:

<div class="container-fluid single-col-full-width-container">
  <ag-grid-common [ag]="ag" ></ag-grid-common>
</div>

ag-grid-common.component.ts:

@Component({
  selector: 'ag-grid-common',
  templateUrl: './ag-grid-common.component.html'
})

export class AgGridCommonComponent implements OnInit {

  @Input() public ag: AgGridModel;
  private gridOptions:GridOptions;
  private rowCount;

  ngOnInit(){

    this.gridOptions = this.ag.gridOptions;

    // Dynamically create ag-grid in the selected element
    var idSelector = '#' + this.ag.id;
    var gridDiv = <HTMLInputElement>document.querySelector(idSelector);
    new Grid(gridDiv, this.gridOptions);

    this.createNewDatasource();
  }

  constructor() {

  }
}

ag-grid-common.component.html:

<div style="width: 100%">

  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-1" *ngFor="let btn of ag.gridButtons">
        <cui-button [id]="btn.id" [iconClass]="btn.icon" (click)="btn.callbackFunc">{{btn.name}}</cui-button>
      </div>
    </div>
  </div>
<div style="height: 320px; padding-top: 10px;" [id]="ag.id" class="ag-fresh"></div>

The ag variable of ag-grid-common is an input variable from moduleOne and some attributes of the ag variable are used in ag-grid-common.component.html

I got this error: ag-Grid: no div element provided to the grid

When I check the page source, all directives with ag are not loaded.

here is the page source:

<ag-grid-common ng-reflect-ag="[object Object]">
<br>
<div style="width: 100%">
  <div class="row">
    <div class="col-sm-12">
      <!--template bindings={}-->
      **<div class="col-sm-1">**
      </div> 
    </div>
  </div>

  <div style="padding: 4px; width: 100%; ">
    <div style="height: 6%;">
      Page Size:
      <select>
        <option selected="" value="10">10</option>
        <option value="100">100</option>
        <option value="500">500</option>
        <option value="1000">1000</option>
      </select>
    </div>

    <div class="ag-fresh" style="height: 320px; padding-top: 10px;"></div>
    <br></div>

</div>
</ag-grid-common>

Answer 1

In AgGridCommonComponent.ngOnInit() you query the DOM but the DOM is probably not available yet. This code should be moved to ngAfterViewInit()