Question

我有一个用例，其中两条不同的路线几乎具有完全相似的视图。方法（据我所知）是路由到同一组件，从而重用它们。该组件基本上显示了可单击项的列表。 唯一的问题是我必须根据当前路由在同一组件的OnInit上调用不同的API。然后单击这些列表项，就必须转到其他组件。例如，在单击项目路由时，路径“ todo”中的示例如下：

path: 'todo',
            component: UserDesktopMainComponent,
            children: [
                {
                    path: ':empLoginId/:formId',
                    component: EvaluationFormComponent
                },
                {
                    path: '',
                    component: EmptyComponentComponent
                },

                {
                    path: '**',
                    redirectTo: ''
                }
            ]

从路径“历史”开始

path: 'history',
            component: HistoryDesktopComponent,
            children: [
                {
                    path: ':empLoginId',
                    component: EvaluationDetailsComponent
                },
                {
                    path: '',
                    component: EmptyComponentComponent
                },

                {
                    path: '**',
                    redirectTo: ''
                }
            ]

我想到的解决方案是在通过路由快照或通过路由的数据部分中的pass进行呼叫之前，在onInit上检查当前路由。然后在服务中，我可以从组件传递该特定关键字并相应地调用API（我想知道是否有更优雅的方法来做到这一点）。对于单击时的路由，我可以调用一个组件函数，该组件函数将基于当前路由进行navigationByURL。目前，在模板中，我的路由方式如下：

<a *ngFor="let emp of employeeDisplayList" routerLink="{{'/todo/'+emp.employee.loginId+'/'+emp.evaluationFormMappingId}}"</a>

这可能不会让我按照自己想要的方式进行布线。

在这里我可能缺少一些非常基本的概念，或者这可能是一个设计模式问题。 我想知道的是，如果有一种更好，更优雅的方法来解决上述所有问题，基本上可以重用该组件。我不想将相同的代码从一个组件复制到另一个组件。

Answer 1

假设我了解此问题，您希望在两页上列出可点击的项目-但网址的构建方式不同。

制作一个新组件！

在Typescript / Javascript函数中，对象是对象，因此我们可以将它们用作组件的输入参数。

clickable-list.ts

@Component({
    selector: 'my-clickable-list',
    templateUrl: './clickable-list.html',
    styleUrls: ['./clickable-list.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClickableListComponent<T> {
    @Input()
    public items: T[];

    @Input()
    public getUrl: (item: T) => string;

    constructor(){}
}

clickable-list.html

<div>
    <a *ngFor="let item of items" [routerLink]="getUrl(item)"</a>
</div>

UserDesktopMainComponent（HTML）

<my-clickable-list [items]="employeeDisplayList" [getUrl]="getTodoUrl"></my-clickable-list>

UserDesktopMainComponent（TS）

public getTodoUrl(emp: WhateverTypeThisIsSupposedToBe) {
    return "/todo/" + emp.employee.loginId + "/" + emp.evaluationFormMappingId;
}

HistoryDesktopComponent（HTML）

<my-clickable-list [items]="employeeDisplayList" [getUrl]="getHistoryUrl"></my-clickable-list>

HistoryDesktopComponent（TS）

public getHistoryUrl(emp: WhateverTypeThisIsSupposedToBe) {
    return "/history/" + emp.employee.loginId;
}

角度-通用组件在OnInit

1 个答案: