我是一个有用的助手，可以将文本翻译成中文。
我在创建Angular 4中可重复使用组件方面遇到了困难。我有一堆报表，每个报表都包含一个搜索表单（每个报表的字段不同）和一个材料表格结果列表（每个报表的字段列表不同）。当我为每个报表复制整个组件时，它按预期工作，但我想将其重构为可重用的组件/模板和子组件来扩展它。但作用域都错了，我无法理解这是如何工作的。
report.component.ts（可重用组件）
我在创建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 (a specific report)
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的范围内。我漏掉了什么？