angular - Angular：.ts 文件代码优化

Question

我在角度 4 上工作，我的 .ts 组件太长（850 行）。我已经将冗余代码移到了一个函数中，并且还分离了模板。如何进一步优化代码？我可以创建一个新组件并将我的代码移动到那里吗？或者任何其他方式，请指导。

标签： angulartypescript

Answer 1

我可以创建一个新组件并将我的代码移到那里吗

是的你可以。这就是基于组件的架构应该做的。您可以将部分 HTML 结构提取到一个新组件中，然后在另一个组件中呈现它。例如：

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        #drawer
        class="sidenav"
        fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="!(isHandset$ | async)"
    >
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
            <a
                mat-list-item
                href="#"
            >
                Link 1
            </a>
            <a
                mat-list-item
                href="#"
            >
                Link 2
            </a>
            <a
                mat-list-item
                href="#"
            >
                Link 3
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button
                type="button"
                aria-label="Toggle sidenav"
                mat-icon-button
                (click)="drawer.toggle()"
                *ngIf="isHandset$ | async"
            >
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>life-quality-web</span>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

您可以轻松地将部件从 mat-sidenav 移动到新组件：

<mat-sidenav-container class="sidenav-container">

   // component: my-sidenav
   <my-sidenav></my-sidenav>

    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button
                type="button"
                aria-label="Toggle sidenav"
                mat-icon-button
                (click)="drawer.toggle()"
                *ngIf="isHandset$ | async"
            >
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>life-quality-web</span>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

您也可以将逻辑移动到服务，这甚至是角度样式指南建议的方式：https ://angular.io/guide/styleguide#delegate-complex-component-logic-to-services