Angular组件嵌套问题：Widget无法访问Page1属性及存活疑问

一、为什么Widget无法访问Page1的属性？Page1是否已销毁？ #

你的怀疑方向是对的，但得结合组件的嵌套/导航方式具体看：

• 如果Page1是路由组件，且你通过路由跳转（比如routerLink）到Page2，那Angular会销毁Page1实例——这完全符合Angular的生命周期特性，路由切换时会卸载前一个路由组件，此时Widget自然拿不到Page1的属性，因为它已经不存在了。
• 如果Page1是直接在模板中嵌套Page2（写<page2></page2>），那只要Page1本身没被从DOM移除，就不会被销毁。这种情况下还拿不到属性，大概率是状态传递方式有误，而非组件被销毁。

确保Page1持续运行的方案

根据你的场景，推荐三种方式：

• 改用组件嵌套：如果Page2不需要作为独立路由页面，直接在Page1模板中嵌入它，Page1会一直存在于视图树中，不会被销毁。
• 自定义路由复用策略：如果必须用路由跳转，可自定义RouteReuseStrategy缓存Page1实例，切换路由时不销毁它，返回时保留原有状态。
• 用单例服务共享状态：最推荐的做法是把Page1中需要共享的属性放到一个单例服务（比如Page1StateService）里，Page1更新服务中的状态，Widget通过注入服务获取最新值。这种方式不依赖组件生命周期，耦合度更低。

二、为什么注入Page1报“No provider”，但注入Page2没问题？ #

这是Angular依赖注入（DI）的规则导致的：

• 注入Page2成功，是因为Page2是Widget的直接父组件，Angular的注入器会沿着组件树向上查找，父组件的实例会被自动纳入子组件的DI上下文，所以能找到Page2的提供者。
• 而Page1是Page2的父组件，默认情况下组件不会自动把自己注册为可注入的提供者，Widget的注入器向上查找时找不到Page1的注册信息，就会抛出“No provider for Page1”错误。

解决注入Page1的问题

1. 在Page1的@Component中注册自身为提供者：

   @Component({
     selector: 'page1',
     templateUrl: './page1.component.html',
     styleUrls: ['./page1.component.css'],
     providers: [{ provide: Page1, useExisting: forwardRef(() => Page1) }]
   })
   export class Page1Component { ... }
   

   这样Page1的所有子组件（包括Page2和Widget）都能通过DI注入它的实例。
2. 优先用服务共享状态：还是更推荐通过服务传递状态，而非直接注入父组件——直接注入会让组件耦合度太高，不利于后续维护和测试。

内容的提问来源于stack exchange，提问作者Canberk Dogmus