javascript - Angular : How to get value in html passing to other component?

Question

我正在尝试将从 Web 服务获取的值发送到另一个组件，但问题是我在另一个组件中获取的是空值，而我在执行控制台时可以看到该值存在。当前组件中的 log()。

应用组件

ts

level: string = '';

getCustomer(id: string) {
    this.isLoading = true;

        this.customerService.getOne(id)
            .subscribe(
                (data) => {
                    this.level = data.level;
                    console.log(this.level); // Here I can see the value
                },
                (error) => {
                    this.errorMessage = error;
                },
            );
      }

html

    <div class="col-lg-8">
      <app-other-component [active]="level"></app-other-component> 
    </div>

AppOtherComponent

ts

@Input() active: string;

ngOnInit() {
    console.log(this.active); // Here I'm getting an empty string
  }

我认为这一行正在执行 <app-other-component [active]="level"></app-other-component>在 'level' 的值被填满之前。

我该如何解决这个问题？谢谢。

Answer 1

尝试将 div 包装在 *ngIf 中，如果您不希望 app-other-component 在从网络服务设置值之前可见:

<div class="col-lg-8" *ngIf="level">
  <app-other-component [active]="level"></app-other-component> 
</div>

是的，正如 Yousef 所建议的，您将在 ngOnChanges 而不是 ngOnInit 中获得更新的 @Input 值。 ngOnChanges 是每次 @Input 属性之一发生变化时在组件上调用的函数。所以你会得到更新后的 @Input 属性:

@Input() active: string;

ngOnChanges() {
  console.log(this.active); // Here You'll get the updated `active` string.
}