Angular 6：在 ngOnInit 中使用 @Input 的值

Posted 2023-03-13

【中文标题】Angular 6：在 ngOnInit 中使用 @Input 的值

【英文标题】：Angular 6: use the value of an @Input within an ngOnInit

【发布时间】：2019-07-08 13:52:55

【问题描述】：

我想通过输入来检索模型车的值，但我不确定它是如何工作的。这是我尝试过的。

@Input() model : Car
car: Car;

    ngOnInit() 
        this.car= this.carService.getcar(model.id);
      

不幸的是模型总是空的。我该怎么办？

编辑： 父级 html

 <app-model
        [model]="car">
  </app-model>

父 ts 文件

ngOnInit
  this.shopService.get()
        .pipe(
          take(1),
          finalize(() => 
                    )
              )
         .subscribe(result => 
              this.car = result;
              );
          )
        )
 

【问题讨论】：

您的代码看起来不错，@Input() 属性将始终在 ngOnInit() 之前获取其值。使用 Visual Studio Code 和 tslint 来避免语法上的小问题。如果您的模型为空，请检查父组件

显示你使用这个组件的父组件代码并绑定输入模型

显示你的父组件

假设您的服务正常，仅使用 .subscribe 进行测试

【参考方案1】：

你必须使用@Input()（带括号）

【参考方案2】：

在另一个组件的 HTML 中

<app-detail-component [model]="id: 1, name: 'Carname'"></app-detail-component>

在您描述的组件的 .ts 文件中（我假设组件的名称是 DetailComponent.ts）

@Input() model: Car;
car: Car;

ngOnInit() 
     this.car= this.carService.getcar(model.id);

官方文档链接： https://angular.io/guide/component-interaction

【参考方案3】：

model 为空，因为在子组件中调用 ngOnInit 之后，分配了父组件中的变量 car。你需要在ngOnChanges中调用carService的方法，而不是ngOnInit。

@Input() model: Car
car: Car;

ngOnChanges() 
  this.car = this.carService.getcar(model.id);

【讨论】：

@Jean 很高兴它有帮助:)