1

我正在创建一个组件，我想将其用作另一个组件中的子组件，但也用作独立视图。

例如，组件将列表 和用于查看对象详细信息的面板ViewCarsComponent配对。当从列表中选择一个项目时，该项目的对象将通过 an 提供给详细信息面板，并更新面板。但是，当我导航到 时，我想单独显示详细信息面板以及 ID 为 20 的详细信息。因此，这个组件可以采用由兄弟列表组件通过 提供的对象，或者作为它的 URL 参数然后可以用来进行自己的查询。SmallCarsListComponentCarCarDetailComponentCar@Input/cars/small/20CarCar@Inputnumber

有没有更好的方法来做到这一点？是否有一些我应该编写的中间件可以检索Car与作为 URL 参数提供的 ID 对应的值，然后将其交给CarDetailComponent，因此所述组件永远不需要对Car对象本身发出请求？是否应该制作两个独立的组件，一个是为 URL 参数设计的@Input，一个是为 URL 参数设计的？

4

1 回答 1

1

是否有一些我应该编写的中间件可以检索与作为 URL 参数提供的 ID 对应的 Car，然后将其交给 CarDetailComponent，因此所述组件永远不需要对 Car 对象本身发出请求？

我相信您正在寻找的是route-resolver。在路由时，解析器可以拦截 URL 参数，使用它来获取对象，并使其可用于在该路由下呈现的所有组件。例如...

应用程序路由.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 }
    ]
},

小部件.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
    }
}

小部件详细信息.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
    ) { }
}
于 2020-01-24T17:06:15.690 回答