Question

我想从组件element（来自_dataTable函数）获取变量datatable.component.ts，render()的值，以通过{为新按钮创建新事件{1}}。或者在此组件内创建一个新函数。我有一个问题，如何通过element.on和DatatableComponent访问Czas-PracyModule中的元素。我可以通过SmartadminModule直接省略双DatatableComponent来执行此操作，但我的变量值为NgModule - 这很明显。我想从undefined

获取此信息

下面是最重要文件的组件和代码的结构

czas-pracy.component.ts

datatable.component.ts

App structure:
../+czas-pracy
../+czas-pracy/czas-pracy.component.ts
../+czas-pracy/czas-pracy.module.ts

../share/ui/database/
../share/ui/database/smartadmin-database.module.ts
../share/ui/database/datatable.component.ts

smartadmin.datatable.module.ts

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;

@Component({

  selector: 'sa-datatable',
  template: `
      <table class="dataTable responsive {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
      </table>
`,
  styles: [
    require('smartadmin-plugins/datatables/datatables.min.css')
  ]
})
export class DatatableComponent implements OnInit {
  _dT : any;  
  @Input() public options:any;
  @Input() public filter:any;
  @Input() public detailsFormat:any;

  @Input() public paginationLength: boolean;
  @Input() public columnsHide: boolean;
  @Input() public tableClass: string;
  @Input() public width: string = '100%';

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    Promise.all([
      System.import('script-loader!smartadmin-plugins/datatables/datatables.min.js'),
    ]).then(()=>{
      this.render()

    })
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.paginationLength)
      toolbar += 'l';
    if (this.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        // complete: function (xhr) {
        //
        // }
      }
    }

    options = $.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json)=> {
        element.parent().find('.input-sm', ).removeClass("input-sm").addClass('input-md');
      }
    });

    const _dataTable = element.DataTable(options);
    this._dT = _dataTable;
    console.log(_dataTable);

      if (this.filter) {
      // Apply the filter
      element.on('keyup change', 'thead th input[type=text]', function () {
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();
      });
    }
    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }
    if(this.detailsFormat){
      let format = this.detailsFormat
      element.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = _dataTable.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
      })
    }
  }
  _dataTable1(){
   console.log( this._dT);
   console.log('dT');
  }
}

czas-pracy.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatatableComponent } from './datatable.component';

// require('smartadmin-plugins/bower_components/datatables.net-colreorder-bs/css/colReorder.bootstrap.min.css');

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DatatableComponent],
  exports: [DatatableComponent],
})
export class SmartadminDatatableModule { }

我尝试了很多方法，但没有任何作用...... 我会感激任何sugestions或solusion。谢谢。问候

Answer 1

我不太清楚我理解你的问题。但是，如果您希望在组件之间共享数据，可以使用rxjs/BehaviorSubject。这是一个可以尝试应用于项目的示例。您有一个共享数据服务，它将通过组件共享数据。在组件中，您可以使用subscribe方法检查数据更改。 https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

通过Double @NgModule Angular2从其他组件获取元素，变量

1 个答案: