Я застрял в создании повторно используемого компонента в Angular 4. У меня есть куча отчетов, которые состоят из формы поиска (поля разные для каждого отчета) и списка результатов таблицы материалов (список полей отличается для каждого отчета). Он работает, как и ожидалось, когда я дублирую весь компонент для каждого отчета, но я хочу реорганизовать его в повторно используемый компонент/шаблон и дочерние компоненты, расширяющие его. Но все области неверны, и я не могу понять, как это работает.
report.component.ts (компонент многократного использования)
import {Component, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material';
import 'rxjs/add/operator/map';
import {ReportsDataSource} from '../services/reports-datasource.service';
@Component({
selector: 'app-report',
templateUrl: './report.component.html',
})
export class ReportComponent {
@ViewChild(MatPaginator) paginator: MatPaginator;
/** result table columns */
columns = [];
/** Column definitions in order */
displayedColumns = this.columns.map(x => x.columnDef);
/** empty search parameters object, used for form field binding */
/** datasource service */
dataSource: ReportsDataSource;
/** submit the form */
getData() {
this.dataSource.getData();
}
}
report.component.html (шаблон многократного использования)
<form (ngSubmit)="getData()" #ReportSearchForm="ngForm">
<ng-content select=".container-fluid"></ng-content>
<button type="submit" mat-button class="mat-primary" [disabled]="!ReportSearchForm.form.valid">Search</button>
</form>
<mat-table #table [dataSource]="dataSource">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<mat-header-cell *matHeaderCellDef>{{ column.header }}</mat-header-cell>
<mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[length]="dataSource ? dataSource.meta.total_results : 0"
[pageSize]="dataSource ? dataSource.meta.per_page : 25"
[pageSizeOptions]="[10, 25, 50, 100]"
>
</mat-paginator>
childreport.component.ts (конкретный отчет)
import {Component, OnInit} from '@angular/core';
import {ReportComponent} from '../report.component';
import {ChildreportService} from './childreport.service';
import {ReportsDataSource} from '../../services/reports-datasource.service';
@Component({
selector: 'app-report-child',
templateUrl: './childreport.component.html',
providers: [ChildreportService, ReportsDataSource]
})
export class ChildreportComponent extends ReportComponent implements OnInit {
constructor(private childreportService: ChildreportService) {
super();
}
/** result table columns */
columns = [
{columnDef: 'column1', header: 'Label 1', cell: (row) => `${row.column1}`},
{columnDef: 'column2', header: 'Label 2', cell: (row) => `${row.column2}`}
];
ngOnInit() {
this.dataSource = new ReportsDataSource(this.ChildreportService, this.paginator);
}
}
childreport.component.html (форма поиска для этого отчета, встроенная в родительский шаблон)
<app-report>
<div class="container-fluid">
<mat-form-field>
<input matInput placeholder="some field" name="fieldx">
</mat-form-field>
</div>
</app-report>
Что работает: я получаю форму, встроенную в основной шаблон, и никаких ошибок.
Что не работает: Форма и таблица привязаны к ReportComponent вместо ChildreportComponent. Я вроде как понимаю, почему это происходит (потому что областью этого шаблона является этот компонент), но я понятия не имею, как я могу «наследовать» шаблон и быть в области действия ChildreportComponent. Что мне не хватает?
