0
을 통해 다른 구성 요소에서 변수 I는 element.on에 의해 새로운 버튼에 대한 새로운 이벤트를 만들 수 (render() 기능에서) 구성 요소 datatable.component.ts에서 변수 element, _dataTable의 값을 좀하고 싶습니다. 또는이 구성 요소 내에 새 함수를 만듭니다. 요소가있는 DatatableComponent에 Czas-PracyModule 및 SmartadminModule 통해 얻는 방법에 문제가 있습니다. 나는 double NgModule을 직접 생략하고 DatatableComponent에 의해 이것을 할 수있다. 그러나 나의 변수 값은 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에 감사 수 있습니다 ... 작동하지 않습니다. 감사. 인사말