Angular 15中：@ViewChild获取对话框与HTML传元素哪种更优？

方案1：通过@ViewChild获取对话框并在TS中调用关闭逻辑 #

• 逻辑内聚性强：保存、关闭相关逻辑全部集中在TS文件中，后续维护时不用在模板和TS间来回切换查找关联代码，代码结构更清晰。
• 类型安全有保障：使用@ViewChild时可指定对话框具体类型（如自定义组件或MatDialog这类UI库类型），TS编译器会自动做类型校验，避免模板传参可能引发的类型错误。
• 扩展性更灵活：如果后续需要在其他场景（比如超时自动关闭、取消按钮触发关闭）调用关闭逻辑，直接在TS里复用已获取的对话框实例即可，无需修改模板。
• 模板更简洁：保存按钮仅需绑定点击事件，不用额外传递对话框元素，减少模板中的冗余代码。

方案2：从HTML模板将对话框元素传入保存事件处理函数 #

• 代码更轻量：无需在TS中定义额外的@ViewChild属性及初始化逻辑，针对这种仅在保存事件中使用一次的场景，代码量更少、更精简。
• 规避初始化时机问题：@ViewChild实例存在组件生命周期就绪时机限制（需在ngAfterViewInit之后才能访问），而模板直接传参能确保点击时拿到的是已渲染完成的对话框实例，不会出现undefined的情况。
• 直观性更强：模板中直接可见保存按钮与对话框的关联关系，新手开发者能快速理解点击保存时对应的操作对象，降低理解成本。
• 无额外机制依赖：不依赖Angular的视图查询机制，减少了对组件生命周期的绑定，代码更独立。

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