Angular 5：无法将Observable返回的对象作为组件输入传递

我来帮你搞定这个控制台打印null的问题，核心有两个关键点需要修正：

1. 异步数据流的时机不匹配 #

你在ngOnInit里打印this.variables，但envVars$是个Observable，通过async管道异步传递数据——ngOnInit执行的时候，async管道还没完成订阅并把数据传递给组件的输入属性，所以此时variables自然是null。

解决这个时机问题，你有两个选择：

• 把输入属性改成setter形式，每次输入值更新时都会触发：

  @Input() set variables(val: any) {
    console.log('拿到的variables值:', val);
  }
  

• 改用ngOnChanges钩子监听输入属性变化：

  import { SimpleChanges } from '@angular/core';
  
  // ...
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['variables']) {
      console.log('variables更新为:', changes['variables'].currentValue);
    }
  }
  

2. 误用了json管道 #

你在模板里写的(envVars$ | async)?.values | json，会把原本的对象转换成JSON格式的字符串，而不是你期望的原始对象。如果你的组件需要接收的是对象类型，这个管道完全是多余的，直接去掉就好：

<app-code [variables]="(envVars$ | async)?.values"></app-code>

完整修复后的代码示例 #

子组件TS： #

import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-code',
  templateUrl: './code.component.html',
  styleUrls: ['./code.component.css']
})
export class CodeComponent {
  @Input() set variables(val: {}) {
    console.log('Received variables:', val);
  }

  // 或者用ngOnChanges
  // ngOnChanges(changes: SimpleChanges) {
  //   if (changes['variables']) {
  //     console.log('Variables changed:', changes['variables'].currentValue);
  //   }
  // }
}

父组件HTML： #

<app-code [variables]="(envVars$ | async)?.values"></app-code>

这样修改后，你就能正确拿到envVars$发射的values对象，控制台也不会再打印null了。

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