Question

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

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

角度：.ts文件代码优化

1 个答案: