Question

我坚持在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。我有点理解为什么会发生这种情况（因为这个模板的范围就是那个组件）但是我不知道我怎么能继承＃34;模板，并在ChildreportComponent范围内。我错过了什么？

Answer 1

我自己想通了。事实上，解决方案相当简单。我的错误是在我的report.component中同时尝试两件事，提供模板和逻辑。我最终得到的是一个抽象组件，它包含逻辑并由每个报告扩展，以及每个报告中相似部分的几个较小组件（shell，结果列表等）。我也从模板表格切换到反应形式。

report-base.component.ts 包含公共逻辑

import {OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {MatPaginator, MatSidenav} from '@angular/material';

import 'rxjs/add/operator/map';

import {ReportsDataSource} from '../common/services/reports-datasource.service';
import {ReportsService} from '../common/services/reports.service';
import {ReportsResultlistService} from '../common/services/reports-resultlist.service';

export abstract class ReportBaseComponent implements OnInit {
    constructor(
        protected _formBuilder: FormBuilder, protected _reportService: ReportsService, protected _resultlistService: ReportsResultlistService) {
    }


    /**
     * For toggling the search form and resultlist action buttons
     * @type {boolean}
     */
    protected hasResults = false;

    /** Default data source for the table */
    protected dataSource: ReportsDataSource;

    /** search form controls */
    protected searchForm: FormGroup;

    /** result table columns */
    protected columns = [];

    ngOnInit() {
        this.createForm();
        this.dataSource = new ReportsDataSource(this._reportService, this._resultlistService);
    }

    /**
     * Builds the searchForm Group
     */
    protected createForm() {
        // create an empty form
        this.searchForm = this._formBuilder.group({});
    }

    /**
     * Submits the form/loads data (f.ex. pagination)
     */
    protected getData() {
        this.hasResults = true;
        this.dataSource.search = this.searchForm.value;
        this.dataSource.getData();
    }
}

report-shell.component.ts 是一个CHILD组件（我的逻辑错误之一），提供组件周围的shell：

import {Component, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'app-report-shell',
    templateUrl: './report-shell.component.html',
})
export class ReportShellComponent {
    constructor(private route: ActivatedRoute) {
        this.title = route.routeConfig.data['caption'];
    }

    @Input() hasResults = false;
    title: string;
}

report-shell.component.html 提供搜索表单和结果列表周围的HTML

<mat-expansion-panel [expanded]="!hasResults">
    <mat-expansion-panel-header>
        Search
    </mat-expansion-panel-header>
    <ng-content select="form"></ng-content>
</mat-expansion-panel>
<div class="result-list">
    <mat-toolbar class="result-header"><span>{{ title }}</span>
        <span class="fill-remaining-space"></span>
        <button class="fa fa-file-excel-o" (click)="exportExcel()"></button>
    </mat-toolbar>
    <ng-content select=".result-table"></ng-content>
</div>

因此，我的报告扩展了报告库，只需使用shell als a child：

childreport.component.ts 是一种特定报告，仅实现此报告的具体内容

import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';

import {ReportChildreportService} from './childreport.service';
import {ReportsDataSource} from '../../common/services/reports-datasource.service';
import {ReportsResultlistService} from '../../common/services/reports-resultlist.service';

import {ReportBaseComponent} from '../report-base.component';


@Component({
    selector: 'app-report-dispatches',
    templateUrl: './dispatches.component.html',
    providers: [ReportChildreportService, ReportsResultlistService, ReportsDataSource]
})
export class ReportDispatchesComponent extends ReportBaseComponent implements OnInit {
    constructor(protected _reportService: ReportChildreportService, protected _formBuilder: FormBuilder, protected _resultlistService: ReportsResultlistService) {
        super(_formBuilder, _reportService, _resultlistService);
    }

    /** result table columns */
    columns = [
        {columnDef: 'name', header: 'Name', cell: (row) => `${row.name}`}
    ];

    createForm() {
        this.searchForm = this._formBuilder.group({
            name: ''
        });
    }
}

<强> childreport.component.html

<app-report-shell [hasResults]="hasResults">
    <form (ngSubmit)="getData()" [formGroup]="searchForm" novalidate>
                    <mat-form-field>
                        <input matInput placeholder="search for a name" name="name" formControlName="name">
                        <mat-error>Invalid name</mat-error>
                    </mat-form-field>
                </div>
        </div>
        <app-form-buttons [status]="searchForm.status"></app-form-buttons>
    </form>
        <app-report-result-list
                [(dataSource)]="dataSource"
                [columns]="columns"
                [displayedColumns]="displayedColumns"
                class="result-table"
        ></app-report-result-list>    
</app-report-shell>

我不会详细了解表单和结果列表组件，这个答案很长，因为它是： - ）

所以我设法减少了很多代码重复，尽管仍然有一些（除了表单之外，还在childreport.component.html中）。

Answer 2

我建议你看看this article。 @WjComponent装饰器可能会为您提供有关您的方法的线索。我从文章中理解的是，您需要一个新的组件装饰器来共享基类和子类之间的属性。

文章引用：

@Component({  selector: 'inherited-grid'
})
export class InheritedGrid extends wjGrid.WjFlexGrid {
...
}

现在我们有了组件的新元素名称！但是我们错过了基础WjFlexGrid类的装饰器中定义的所有其他必要设置。例如，WjFlexGrid的装饰器为输入装饰器属性分配可用于标记中绑定的网格属性数组。我们在新组件中丢失了它，如果你现在尝试绑定它们，你会发现绑定不起作用。

答案：Wijmo为Angular 2模块提供的@WjComponent装饰器。它的使用方式与标准的@Component装饰器相同，并且接受所有@Component装饰器的属性（加上一些特定于Wijmo的属性），但它的主要好处是它将其属性值与基类装饰器提供的属性合并。因此，组件定义的最后一步是用@WjComponent替换@Component：       从＆＃39; wijmo / wijmo.angular2.directiveBase＆＃39;;
导入{WjComponent}

@WjComponent({
  selector: 'inherited-grid'
})
export class InheritedGrid extends wjGrid.WjFlexGrid {
...
}

我们可能已经使用“inherited-grid”名称重新定义了装饰器的selector属性，但是所有其他必要的属性（如输入和输出）都是从基础WjFlexGrid组件的装饰器中获取的。现在，element创建了我们的InheritedGrid组件，所有属性和事件绑定都正常运行！

另一种方法可能是将ReportComponent定义为指令，并通过@Host decorator在ChildReport和基础之间共享数据。

您还可以查看ngx-datatable的源代码。他们的示例和组件的源代码非常有用，可以为您提供有关在组件和覆盖模板之间共享数据的想法。

角4可重复使用的组件和模板

2 个答案: