0
を介して他のコンポーネントからの変数は私がelement.onすることにより、新しいボタンの新しいイベントを作成する（render()機能から）コンポーネントdatatable.component.tsから変数element、_dataTableの値を取得したいのですが。または、このコンポーネント内に新しい関数を作成します。私はDatatableComponentの要素をCzas-PracyModuleとSmartadminModuleに渡す方法に問題があります。私はこれをDatatableComponentで直接行うことができます。NgModuleを直接省略していますが、私の変数の値はundefinedです。私は以下の最も重要なファイルの構成部品の構造やコード要素を取得し、ダブル@NgModule Angular2
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
datatable.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');
}
}czas-pracy.component.ts
からこれを取得したいのですが
smartadmin.datatable.modu le.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 { }
私はsugestionsやsolusionのために感謝するよ ...私は多くの方法を試してみましたが、何も働きません。ありがとう。ご挨拶