0

我想从组件（从函数）中获取 variable 的值element，以通过 为新按钮创建一个新事件。或者在这个组件中创建一个新函数。我对如何通过and获取元素有疑问。我可以通过直接省略 double来做到这一点，但是我的变量值是- 这很明显。我想从_dataTabledatatable.component.tsrender()element.onDatatableComponentCzas-PracyModuleSmartadminModuleDatatableComponentNgModuleundefinedczas-pracy.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

数据表.component.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');
  }
}

smartadmin.datatable.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 { }

czas-pracy.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { czasPracyRouting } from './czas-pracy.routing';
import {CzasPracyComponent} from "./czas-pracy.component";
import {I18nModule} from "../../i18n/i18n.module";

import {SmartadminModule} from "../shared/smartadmin.module";
import {SmartadminDatatableModule} from "../shared/ui/datatable/smartadmin-datatable.module";

 import { DatatablesRestDemoComponent } from '../+tables/+datatables-showcase/datatables-rest-demo.component';
import { ModalModule } from 'ngx-bootstrap/modal/modal.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    czasPracyRouting,
    SmartadminModule,
    SmartadminDatatableModule,
    ModalModule.forRoot(),
    FormsModule,
  ],
  declarations: [
    CzasPracyComponent,
    DatatablesRestDemoComponent,
  ],
  providers: [
  ]
})
export class CzasPracyModule { }

我尝试了很多方法，但没有任何效果......我将不胜感激任何建议或解决方案。谢谢。问候

4

1 回答 1

0

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

于 2017-12-02T15:45:13.340 回答