这是园子博客后台从 angular 15 升级到 angular 19 后遇到的一个问题。博客后台「随笔 」的侧边栏会显示随笔的分类列表 ，通过这个列表的上下文菜单可以修改分类名称，升级后测试时发现一个问题，修改分类名称后分类列表没有随之更新。
侧边栏随笔分类列表是 SidebarBlogCategoriesComponent 通过订阅 BlogCategoryStore 的 Observable 类型的 categories$ 属性更新的
class SidebarBlogCategoriesComponent implements OnInit {ngOnInit(): void {this._store.categories$.pipe(this._rxHelper.autoUnsubscribe,distinctUntilChanged<BlogCategoryEditDto[]>(isEqual),map(categories => {//...})).subscribe(async nodes => {//...});}
}
对应的 BlogCategoryStore 部分实现代码
@Injectable({providedIn: 'any'
})
export class BlogCategoryStore {readonly categoryList$: Observable<BlogCategoryList>;protected readonly $categoryList = new BehaviorSubject<BlogCategoryList | undefined>(undefined);private _categories$?: Observable<BlogCategoryEditDto[]> | null;get categories$(): Observable<BlogCategoryEditDto[]> {return (this._categories$ ??= this.$categoryList.pipe(map(x => x?.categories ?? [])));}
}
页面加载时通过 SidebarBlogCategoriesComponent 的 parent component PostsSidebarComponent 调用 BlogCategoryStore.refresh 方法触发分类列表的订阅更新，这个地方正常
export class PostsSidebarComponent implements OnInit {ngOnInit() {this.categoryStore.refresh(BlogCategoryType.postCollection);}
}
修改分类名称通过上下文菜单打开编辑分类的对话框进行的：
1）打开上下文菜单是通过调用 CategoryContextMenuService 的 open 方法动态创建 CategoryContextMenuComponent
@Injectable({providedIn: 'any',
})
export class CategoryContextMenuService {constructor(private readonly contextMenuServ: NzContextMenuService,) { }async open<THost extends object>(categoryType: BlogCategoryType,ev: MouseEvent,containerRef: ViewContainerRef) {const { CategoryContextMenuComponent: _CategoryContextMenuComponent } = await import('./category-context-menu/category-context-menu.component');const compRef = containerRef.createComponent(_CategoryContextMenuComponent);//...if (comp.menu) this.contextMenuServ.create(ev, comp.menu);}
}
2）在上下文菜单中点击编辑按钮，则调用 BlogCategoryEditorModalService 的 open 方法通过 NzModalService 打开模态对话框
openEditCategoryModal() {if (this.category) {this._categoryModalServ.open(this.categoryType, {category: this.category,});}
}
BlogCategoryEditorModalService 中对应的部分实现代码
@Injectable({providedIn: 'any',
})
export class BlogCategoryEditorModalService {constructor(private _categoryServ: BlogCategoryService,private _categoryStore: BlogCategoryStore,private readonly nzModalService: NzModalService) { }open(categoryType: BlogCategoryType, { category, createdCallback }: CategoryEditModalOption = {}) {const isCreating = !category || category.categoryId <= 0;const categoryTypeName = BlogCategoryTypeNameMap[categoryType];const title = isCreating ? `新建${categoryTypeName}` : `编辑${categoryTypeName}`;const modalRef = this.nzModalService.create({nzTitle: title,nzContent: BlogCategoryEditComponent,nzData: { categoryType, category },nzOnOk: async comp => {//.... await Promise.all(Array.from(parentsToRefresh).map(p =>// 在编辑分类后刷新分类列表 this._categoryStore.refreshAsync(categoryType, p)));//....return true;},});}
}
3）模态对话框中运行的是进行分类编辑操作的 BlogCategoryEditComponent
export class BlogCategoryEditComponent implements OnInit {constructor(private readonly fb: NonNullableFormBuilder,private readonly systemInfoServ: SystemInfoService,@Inject(NZ_MODAL_DATA)private readonly nzModalData: {categoryType: BlogCategoryType,category: BlogCategoryEditDto | null},) {//...}//...
}
在模态对话框中完成分类编辑（修改分类名称）后，模态对话框会关闭，然后执行 BlogCategoryEditorModalService 中的 nzOnOk 回调方法，调用 this._categoryStore.refreshAsync 方法更新 BlogCategoryStore 中的 _categories$，SidebarBlogCategoriesComponent 订阅了这个 Observable，从而触发侧边栏分类列表的更新。
现在的问题是虽然 this._categoryStore.refreshAsync 用修改后分类列表数据更新了 _categories$，但 SidebarBlogCategoriesComponent 并没有响应这个 Observable 的更新。
一开始折腾了一段时间，没找到任何线索。
后来突然想到，出现这个问题唯一可以解释得通的原因就是 SidebarBlogCategoriesComponent 订阅的 BlogCategoryStore 与 BlogCategoryEditorModalService 更新的 BlogCategoryStore 不是同一个实例。
有了这个思路后，立马想到的是动手验证这个2个实例是否是同一个，参考这篇博文 Get object reference IDs in JavaScript/TypeScript，很快完成了验证，详见博问 https://q.cnblogs.com/q/151643
验证结果如下：
CategoryContextMenuService.categoryStore id: 2
SidebarBlogCategoriesComponent._store id: 2
CategoryContextMenuComponent.categoryStore id: 3
BlogCategoryEditorModalService._categoryStore id: 3
果然不是同一个实例！从 CategoryContextMenuComponent 开始就不是同一个实例，这个 Component 是通过下面的代码动态创建的
const compRef = containerRef.createComponent(_CategoryContextMenuComponent);
改为在 createComponent 时将 Injector 与 EnvironmentInjector 传递过去，问题就解决了。
const compRef = containerRef.createComponent(_CategoryContextMenuComponent,{injector: this.injector,environmentInjector: this.envInjector}
);
之所以升级后出现这个问题，是因为在升级过程中重构代码时删除了上面的 createComponent 时传递 Injector 的代码。
