Angular 2+ - загрузка данных: лучшие практики

Question

Мне было интересно, каков наилучший подход для загрузки данных в Angular 5. Конечно, мы хотим, чтобы компоненты были тупыми;) На данный момент я использую распознаватель, и Angular вызывает распознаватель по определенному маршруту. По сути, данные загружаются до инициализации компонента, поэтому я могу показать анимацию загрузчика пользователю.

например.

AResolver.resolver.ts

@Injectable()
export class AResolver implements Resolve<any> {
    constructor(private readonly aService: AService) {}

    resolve(route: ActivatedRouteSnapshot) {
        return this.aService.find(route.paramMap.get('id'));
    }
}

M.module.ts

export const MRoutes: Routes = [
    {
        path: 'route-x',
        component: AComponent,
        resolve: AResolver
    }
];

AComponent.component.ts

@Component({
    selector: 'a-super-fancy-name',
})
export class AComponent {

    constructor(private readonly route: ActivatedRoute) {}

}

Ну, пока все хорошо, но:

1. Что если у меня есть средства распознавания с зависимостями? Итак, для разрешения B нам нужен идентификатор из A? Должен ли я использовать оболочку резольвера? Таким образом я делаю что-то вроде:

* 1 031 ** ** 1033 тысяча тридцать две * Пример * ** 1036 тысяча тридцать-пять *

@Injectable()
export class ABResolver implements Resolve<any> {

    constructor(private readonly aService: AService, private readonly bService: BService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.aService.resolve(route, state).map((result) => this.bService.resolveWithId(result.Id));
    }
}

Полагаю, это лучший подход, потому что у нас еще есть 2 независимых распознавателя, которые можно использовать повторно. В целом, является ли хорошей практикой создание оболочек распознавателя для всех компонентов, для которых требуются данные, или только для распознавателей, зависящих от других распознавателей, или мне вообще не следует использовать упаковщики распознавателей?

2. А как насчет других методов в резольвере (например, resolveWithId)?

3. в AResolver route.paramMap используется для получения идентификатора. Не лучше ли передать идентификатор, потому что он выглядит тесно связанным?

4. Какие есть альтернативы?

5. Каковы недостатки подхода, который я использую?

Answer 1

Резолверы хороши на бумаге, но только тогда, когда вы можете легко получить все параметры из текущего маршрута, к сожалению, это редко случается, иногда вам придется обращаться к родительским маршрутам, иногда вы не хотите хранить всю информацию в маршруте параметры, иногда вы не хотите блокировать навигацию, также параметры маршрутизатора - не очень гибкая функция, это может легко усложнить рефакторинг (вы не можете просто изменить параметры родительского маршрута, не влияя на дочерние средства распознавания, а ошибки не могут быть проверены компилятором).

Нет предопределенного / рекомендуемого способа загрузки данных в угловых направлениях. В зависимости от масштаба приложения вы можете либо просто загрузить данные в каждый компонент по мере необходимости, либо навязать определенные правила или общие интерфейсы / абстрактные классы, либо использовать кеширование общих служб с помощью rxjs и т. Д. По сути, вы можете выбирать только между пользовательской архитектурой и Redux-подобным подходом ngrx. Очевидно, что ngrx накладывает некоторые ограничения и ограничения, а также обеспечивает структуру и общее руководство.