如何为不同的路由设置组件属性？

Question

我的 Angular 应用程序中有一个顶部导航组件，在三个路线中，我必须在该组件中显示购物车，直到现在我使用的是带有 BehaviourSubject 的服务，当我像在 Products 路线中那样导航时，我正在设置它是真的，然后在我的顶部导航中，我检查是否它是真的，我必须展示购物车。

但是现在我必须找到另一种方法，在 top-nav 组件中检测我是否在“产品”路线中以显示购物车，如果我在“商店”路线中则显示购物车以隐藏它使用重用路线，我无法在“产品”中导航返回时设置 BehaviourSubject

以下哪种方式最好？

在顶部导航的构造函数中，我有以下内容：

cartService.isCartEnabled.subscribe((data) => (this.cart = data));

然后在 html 中检查 cart 是否为 true 我正在显示购物车图标。

Answer 1

你可以为你的路由添加属性，然后是一个路由守卫来设置导航属性。

这里有一个link to angular docs关于配置路由属性

您将具有一些属性的数据节点添加到要在其上显示购物车的路线：

...
  {
    path: 'with-cart',
    component: YourComponent,
    data: { displayCar: true }
  },
  {
    path: 'without-cart',
    component: YourComponent,
  },
...

使用解析器（angular docs 中的更多详细信息）您可以读取此数据参数并将其设置在服务上：

@Injectable({
  providedIn: 'root',
})
export class CartResolverService implements Resolve<boolean> {
  constructor(private yourService: YourService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    this.yourService.setDisplayCart(route.data.displayCart)
    
    return of(route.data.displayCart === true);
  }
}

并使用此解析器重新配置路由：

  {
    path: 'with-cart',
    component: YourComponent,
    data: { displayCar: true },
    resolve: {
      cartResolver: CartResolverService,
    },
  },
  {
    path: 'without-cart',
    component: YourComponent,
    resolve: {
      cartResolver: CartResolverService,
    },
  },

而且，您的导航需要订阅此服务，以便它可以执行更改。