Angular - общий компонент, выполняющий различные вызовы API на OnInit - PullRequest
Новая
       15

Angular - общий компонент, выполняющий различные вызовы API на OnInit

0 голосов
/ 30 августа 2018

У меня есть сценарий использования, в котором два разных маршрута имеют почти полностью похожий вид. Путь (в моем понимании) состоит в том, чтобы направить к одному и тому же компоненту, используя их повторно. Компонент в основном показывает список элементов, которые можно нажимать. Единственная проблема в том, что мне приходится звонить в разные API на OnInit одного и того же компонента в зависимости от текущего маршрута. И по щелчку этих элементов списка, я должен направить к различным компонентам. Например, в пути «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: ''
                }
            ]

Решение, которое я имею в виду, состоит в том, чтобы проверить текущий маршрут onInit, прежде чем совершать вызовы с помощью моментального снимка маршрута или передачи ключевых слов в части данных маршрута. Затем в сервисе я могу передать это конкретное ключевое слово из компонента и соответственно вызвать API (интересно, есть ли более элегантный способ сделать это). Для маршрутизации по щелчку я могу вызвать функцию компонента, которая будет перемещаться по BURL в зависимости от текущего маршрута. В настоящее время в шаблоне я маршрутизирую как: 

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

что, вероятно, не позволит мне прокладывать маршрут так, как я хочу.

Я мог бы упустить здесь что-то очень базовое, или это может быть вопрос модели проектирования. Что я хотел бы знать, так это то, что если есть лучший, элегантный способ решения всех вышеупомянутых вопросов, который в основном будет использовать компонент . Я не хочу копировать один и тот же код из одного компонента в другой.

1 Ответ

0 голосов
/ 30 августа 2018

Предполагая, что я понимаю эту проблему, вы хотите список элементов, на которые можно нажимать, на двух страницах - но URL-адреса создаются по-разному.

Создайте новый компонент!

В Typescript / Javascript функции являются объектами, поэтому мы можем использовать их в качестве входных параметров для компонентов.

интерактивный-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(){}
}

кликабельно-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;
}
...