Angular状态变更时UI未更新，组件实例化相关问题求助

核心问题原因 #

• 你在AppComponent构造函数里new TestComponent()创建的是全新的组件实例，和页面上Angular自动渲染的TestComponent实例完全不是同一个，所以调用这个新实例的setMessage()不会影响页面上显示的那个。
• Angular组件默认不是单例，除非你在providers里特殊配置（但组件一般不这么用）。

正确操作已渲染组件的方法 #

要修改页面上已存在的TestComponent实例，用@ViewChild装饰器：

1. 在AppComponent类里添加：@ViewChild(TestComponent) testComp!: TestComponent;
2. 不要在构造函数里调用方法，等到Angular完成视图初始化后再操作，比如在ngAfterViewInit()生命周期钩子中执行：this.testComp.setMessage('新消息内容')

额外建议 #

组件间通信更推荐使用Service来传递数据，而不是直接获取组件引用，这是Angular的最佳实践，能让代码更松散耦合、更易维护。

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