Angular2组件间数据共享报错，求助解决TypeError问题

嘿，这个报错的核心原因很明确：你的this.child是undefined，所以当你尝试访问this.child.message时自然会抛出类型错误。咱们一步步来修复：

1. 修正ViewChild的组件引用 #

你在app.component.ts里用的是@ViewChild(ChildComponent)，但你的子组件类其实是LoginComponent（从login.component.ts的代码来看）。这就导致Angular找不到对应的组件实例，child变量自然是undefined。

修改app.component.ts的代码：

// 先确保导入了LoginComponent
import { LoginComponent } from './login.component';

@Component({
  // ... 你的组件元数据
})
export class AppComponent {
  @ViewChild(LoginComponent) child!: LoginComponent; // 加上类型声明，用!告诉TS这个变量会被初始化
  message: string = '';

  ngAfterViewInit() {
    this.message = this.child.message;
    alert(this.message);
  }
}

2. 确保子组件在父组件模板中渲染 #

Angular只有当子组件被实际渲染在父组件的模板里时，ViewChild才能获取到它的实例。所以你需要在app.component.html中添加子组件的标签，比如：

<!-- 这里的选择器要和login.component.ts里的selector一致 -->
<app-login></app-login>

检查login.component.ts的@Component装饰器，确认selector是否正确：

@Component({
  selector: 'app-login', // 这个要和模板里的标签对应
  // ... 其他元数据
})
export class LoginComponent {
  message: string = "Hola Mundo!";
}

3. 确认子组件已在模块中声明 #

最后，确保LoginComponent已经被添加到你的AppModule的declarations数组里，不然Angular无法识别这个组件：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent // 必须在这里声明
  ],
  // ... 其他模块配置
})
export class AppModule { }

做完这些修改后，重新运行应用，应该就能正常获取到子组件的message值了。如果还有问题，可以检查一下是否有异步加载组件的情况（比如用*ngIf控制子组件渲染），这种情况下可能需要用ViewChildren结合Observable来监听组件的初始化。

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