Question

我正在尝试学习Angular，并且在路由方面存在关注点分离问题。在我发现的所有指南中，发生的都是在路由模块中指定路由和参数，但在组件文件中解析它们。例如，在经典的《英雄之旅》示例中：

// in app-routing.module.ts
{ path: 'hero/:id': component: HeroDetailComponent }

// in hero-detail.component.ts
constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

ngOnInit() {
     const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

但是在本教程的前面，您所拥有的是Hero对象被用作Input()：

@Input() hero: Hero;

您将绑定到它：

<hero-detail [hero]='hero'></hero-detail>

我想要的是能够保留该逻辑，而是解析URL并将Input()传递到与路由模块相同的文件中，并使组件文件保持原样。像这样：

// app-routing.module.ts
{
    path: 'hero/:id', component: HeroDetailComponent, inputs: path => ({ hero: getHeroObject(+path.params["id"]) })
}

Angular路由中是否有任何选项可以执行以下操作？如果没有，您是否可以考虑将逻辑部分分开的回旋处？我想到的一件事是在路由模块中为每个路径创建单独的组件，每个组件都呈现“纯逻辑”组件，例如：

// app-routing/hero-detail-route.component.ts
constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

ngOnInit() {
     const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

<!--- app-routing/hero-detail-route.component.html -->
<hero-detail [hero]='hero'></hero-detail>

但这只是“解决问题”，不是吗？

有什么想法吗？

谢谢！

Answer 1

您可以通过2种方式来实现。

1。使用resolvers

您可以在以下路线中附加解析器

{
    path: 'hero/:id',
    component: HeroDetailComponent,
    resolve: {
        hero: HeroDetailResolver
    }
}

HeroDetailResolver将包含从服务器获取英雄详细信息的所有逻辑。在component中捕获解析器数据。

this.route.data.subscribe(data => {
    this.hero = data.hero;
});

如果您不熟悉angular resolvers，它们是在加载component之前预取一些服务器数据的便捷工具。

2。使用smart parent和dumb child组件

使用smart parent component来获取所有服务器数据并将其提供给dumb child components。在这种情况下，您可以使HeroDetailLayoutComponent来获取英雄详细信息。然后将其作为@Input()传递到HeroDetailComponent。

// in app-routing.module.ts
{ path: 'hero/:id': component: HeroDetailLayoutComponent }

// in hero-detail-layout.component.ts
constructor(private route: ActivatedRoute, private heroService: HeroService) {}

ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
}

// hero-detail-layout.component.html
<hero-detail [hero]='hero'></hero-detail>

// in hero-detail.component.ts
@Input() hero: any[];

在Angular中将路由逻辑与组件逻辑分开

1 个答案: