Компоненты, активируемые маршрутом, и компоненты, принимающие ввод в Angular 2

Question

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

Например, компонент ViewCarsComponent объединяет список, SmallCarsListComponent, а также панель для просмотра подробной информации о Car объект CarDetailComponent. Когда выбран элемент из списка,Car объект для этого элемента предоставляется на панель сведений через @Inputи панель обновлена. Однако когда я перехожу к/cars/small/20, Я хочу показать отдельную панель деталей с деталями для Car с ID 20. Таким образом, этот компонент может принимать Car объект, предоставляемый компонентом списка братьев и сестер через @Input, или number в качестве параметра URL-адреса, который затем можно использовать для выполнения собственного запроса.

Есть ли лучший способ сделать это? Есть ли промежуточное ПО, которое я должен написать, чтобы получитьCar соответствующий идентификатору, указанному в качестве параметра URL, затем передать его CarDetailComponent, поэтому указанному компоненту никогда не нужно запрашивать Carсам объект? Если два отдельных компонента, один предназначен для@Input а один рассчитанный на параметры URL сделать?

Answer 1

Есть ли какое-то промежуточное программное обеспечение, которое я должен написать, который может извлекать Car, соответствующий идентификатору, указанному в качестве параметра URL, а затем передавать его CarDetailComponent, поэтому указанному компоненту никогда не нужно делать запрос для самого объекта Car?

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

app-routing.module.ts

{
    path: 'widgets',
    component: WidgetsComponent,
},
{
    path: 'widgets/:id',
    resolve: { widget: WidgetResolver },
    children: [
        { path: '', redirectTo: 'details', pathMatch: 'prefix' },
        {
            path: 'details',
            component: WidgetDetailsComponent,
        },
        { path: 'edit', component: WidgetFormComponent }
    ]
},

widget.resolver.ts

@Injectable()
export class WidgetResolver implements Resolve<Widget> {
    constructor(private service: WidgetService) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return this.service.getById(parseInt(route.paramMap.get('id') || ''))
            .pipe(first()); // must complete to resolve route
    }
}

widget-details.component.ts

@Component({
    selector: 'app-widget-details',
    templateUrl: './widget-details.component.html',
    styleUrls: ['./widget-details.component.scss'],
})
export class WidgetDetailsComponent {
    widget$ = this.route.data.pipe(
        pluck('widget')
    );

    constructor(
        private route: ActivatedRoute
    ) { }
}