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

Question

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

Например, компонент ViewCarsComponent объединяет список в список, SmallCarsListComponent, и панель для просмотра подробной информации об объекте Car, CarDetailComponent. Когда элемент из списка выбран, объект Car для этого элемента предоставляется панели сведений через @Input, и панель обновляется. Тем не менее, когда я перехожу к /cars/small/20, я хочу показать панель подробностей отдельно с подробностями для Car с идентификатором 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
    ) { }
}