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

【问题标题】：How do I properly pass data from a component to another in angular 2如何以角度 2 正确地将数据从一个组件传递到另一个组件
【发布时间】：2017-02-15 22:30:09
【问题描述】：

我有这些代码：

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>

ag-grid-common 的 ag 变量是来自 moduleOne 的输入变量并且在ag-grid-common.component.html中使用了ag变量的一些属性

我收到了这个错误：ag-Grid: no div element provided to the grid

当我检查页面源时，所有带有 ag 的指令都没有加载。

这是页面来源：

<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>

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

在AgGridCommonComponent.ngOnInit() 中，您查询 DOM，但 DOM 可能尚不可用。这段代码应该移到ngAfterViewInit()

【讨论】：