Angular 2 中的路由激活和输入接收组件答案

【问题标题】：Route-Activated and Input-Receptive Components in Angular 2Angular 2 中的路由激活和输入接收组件
【发布时间】：2020-05-10 23:56:29
【问题描述】：

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

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

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

【问题讨论】：

我会对“最佳实践解决方案”感兴趣....我的想法，希望他们有所帮助：我可能会删除输入，创建路由并添加代替作为子组件并让组件加载数据（您希望向后端发出小数据请求的 9/10 倍，它还将数据保留在不需要的父级之外）。选项？;服务层可以运行这两个选项，但是..您只是以不同的方式剥马皮。（s 层持有 id 或数据，无需将参数传递给组件。但会依赖某个级别的父级来填充数据。

标签： angular angular2-routing url-parameters angular-input

【解决方案1】：

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

我相信您正在寻找的是route-resolver。在路由时，解析器可以拦截 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
    ) { }
}

【讨论】：