给 Angular + Firebase 应用加登录（三）：轻量首页、懒加载弹窗与导航栏
来源：dev.to — 2026-11-04
📋 概述
这一篇把鉴权串成完整闭环：AuthService 与登录弹窗已经就绪，现在补上首页与导航栏。HomeComponent 与 HeaderComponent 共享 isAuthenticated 这个 computed signal，未登录时首页显示「登录」按钮、导航栏只有首页图标；点击后通过 Promise.all 动态导入登录组件与 CDK Dialog，把它们隔离在初始 main.js 之外；登录成功后导航栏出现退出按钮，首页则把「登录」换成「进入工作台」。文章重点讲了一个坑：await 之后再注入 Dialog 会触发 NG0203，必须用 runInInjectionContext 包住。
🔑 核心要点
- 首页与导航栏共用一个 isAuthenticated computed signal，靠它统一驱动未登录、弹窗中、已登录三种状态。
- 登录弹窗用 Promise.all 动态导入组件与 CDK Dialog，让弹窗代码和 Signal Forms 不进入首屏 main.js 包。
- 在 await 之后注入 Dialog 会抛 NG0203，因为异步续段跑在注入上下文之外，解法是 runInInjectionContext。
- 退出登录只要调用 AuthService.signOut 重置信号并回到 /home，导航栏按钮的显隐就自动跟着变。
💡 金句
“Injecting Dialog after await Promise.all(...) in openSignInModal() triggers Angular's NG0203 error because the async continuation runs outside an injection context.”
译：在 openSignInModal() 里 await Promise.all(...) 之后再注入 Dialog 会触发 Angular 的 NG0203 错误，因为异步续段已经跑在注入上下文之外了。
👍 0
👎 0
← 返回 dev.to 首页