Angular 16中ActivatedRoute无法获取路由data数据的问题

以下是几种可能的原因及对应解决方法：

1. 路由嵌套导致当前ActivatedRoute指向子路由 #

如果outils路由是某个父路由的子路由（配置在children数组里），当前组件的ActivatedRoute默认指向自身所在的子路由节点，若data配置在父路由上，需要通过parent或root层级获取：

ngOnInit(){
    // 获取父路由的data
    console.log(this._activatedRoute.parent?.snapshot.data);
    // 从根路由遍历查找目标路由的data
    let currentRoute = this._activatedRoute.root;
    while (currentRoute) {
        if (currentRoute.snapshot.data['filDArianne']) {
            console.log(currentRoute.snapshot.data);
            break;
        }
        currentRoute = currentRoute.firstChild!;
    }
}

2. 控制台打印快照存在显示延迟 #

浏览器控制台打印复杂对象时，可能因引用更新导致显示不全，直接打印data字段或转成JSON字符串能看到真实数据：

ngOnInit(){
    // 直接打印data字段
    console.log(this._activatedRoute.snapshot.data);
    // 转JSON避免引用显示问题
    console.log(JSON.stringify(this._activatedRoute.snapshot.data));
}

3. 改用订阅data Observable的方式 #

快照是路由初始化时的静态状态，若路由存在动态加载或延迟初始化，订阅data流能确保获取到最新数据：

ngOnInit(){
    this._activatedRoute.data.subscribe(data => {
        console.log(data.filDArianne);
    });
}

4. 确认路由模块已正确导入 #

检查AppModule的imports数组，确保AppRoutingModule已被导入，否则路由配置不会生效：

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule // 必须包含此导入
  ],
  declarations: [AppComponent, OutilsComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Théo Polo