Angular 19 中的 Router Outlet Input 介绍
内容提要
Angular 19引入了Router Outlet Input，允许直接向通过路由出口加载的组件传递数据。这消除了中间服务的需求，提高了效率。可以使用ROUTER_OUTLET_DATA注入令牌访问数据。此功能对于在通过路由出口路由的父子组件之间共享数据非常有用。它减少了冗余并使子组件专注于其特定逻辑。通过在父组件中更新过滤器，数据在子组件中以响应式方式更新。这简化了数据共享并改善了Angular应用程序。
延伸解读
与常规输入绑定的区别
常规的输入绑定要求子组件选择器直接出现在父组件模板中，而Router Outlet Input允许向通过路由出口动态加载的组件传递数据。这解决了路由组件无法直接使用输入绑定的限制，使数据传递不再依赖中间服务。
类型安全与开发体验
通过ROUTER_OUTLET_DATA注入的数据类型为Signal<unknown>，Angular不会自动推断具体类型。开发者需要手动将其断言为期望的类型，例如Signal<Article[]>，以获得更好的类型检查和开发体验。
适用场景与优势
当父组件需要与多个路由子组件共享数据时，此功能尤为有用。可以在父组件中一次性计算数据（如过滤后的文章列表），然后传递给路由出口，避免在每个子组件中重复计算，减少冗余并让子组件专注于自身逻辑。
响应式更新机制
父组件中的数据变化会通过Router Outlet Input响应式地更新到当前激活的路由子组件。这意味着子组件始终能获取最新数据，无需额外计算或服务调用，简化了数据同步流程。
Q&A
Angular 19中的Router Outlet Input有什么新功能？
Angular 19引入了Router Outlet Input，允许直接向通过路由出口加载的组件传递数据，消除了中间服务的需求。
如何在Angular中使用Router Outlet Input？
可以通过在路由出口中使用routerOutletData输入属性来传递数据，例如：<router-outlet [routerOutletData]='articles()' />。
Router Outlet Input如何改善组件之间的数据共享？
它允许在父组件中计算数据并直接传递给路由出口，减少冗余并确保子组件始终拥有最新数据。
ROUTER_OUTLET_DATA注入令牌的作用是什么？
ROUTER_OUTLET_DATA注入令牌用于在路由组件中访问通过Router Outlet Input传递的数据。
使用Router Outlet Input有什么具体的应用场景？
它适用于需要在父组件和多个子组件之间共享数据的场景，例如过滤文章列表和显示标签云。
Router Outlet Input对Angular应用的维护性有什么影响？
它简化了路由组件之间的数据共享，提升了Angular应用的可维护性和清晰度。
