将对象从父级传递给子级答案

【问题标题】：pass object from parent to child将对象从父级传递给子级
【发布时间】：2018-09-17 22:18:29
【问题描述】：

我有一个约定对象，我必须将其作为输入传递给子组件，当我在子模板中调用它时会显示约定 id，但是当我尝试在控制台中使用约定时会出现未定义。日志。我尝试将我的console.log 放在孩子的构造函数中以及ngOnInit、ngAfterViewInit 和ngOnChanges 中。对于 ngOnChanges，当我只将约定的 id 作为输入传递给子组件时，它工作得很好，但我需要传递约定而不是它的 id。

index.component.ts

@Component({
    templateUrl: './index.template.html',
    selector: 'be-convention-update',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConventionUpdateComponent {

    private convention$: Convention;
    private conventionId: number;

    constructor(private route: ActivatedRoute,
        private conventionService: ConventionService) {
        this.route.params.subscribe(
            (params: any) => {
                this.conventionId = params['id'];
                this.conventionService.getOne(this.conventionId).subscribe(response => this.convention$ = response);
            }
        );
    }

}

index.template.html

<be-form-convention [convention]="convention$"></be-form-convention>

form.component.ts

@Component({
    selector: 'be-form-convention',
    templateUrl: './form.template.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConventionFormComponent implements OnChanges, OnInit {

    @Input() convention: Convention;

    constructor() {
    }

    public ngAfterViewInit() {
      console.log(this.convention); //undefined
    }

    public ngOnInit(): void {
      console.log(this.convention); //undefined
    }

    public ngOnChanges(changes: SimpleChanges): void {
      const object: SimpleChange = changes.convention;
      console.log('prev value: ', object.previousValue); //undefined
      console.log('got name: ', object.currentValue); //undefined
    }

}

【问题讨论】：

你真的从你的conventionService.getOne那里得到你的约定对象吗？
$ 后缀尖叫着可观察到并且“需要异步管道”，但至少不清楚你在做什么以及为什么这样做。
@Orodan 是的，我从我的服务中获取约定对象
@AluanHaddad 你是对的，但这与我的问题无关
从我在这里看到的，你做得对，你能展示你的 ConventionUpdateComponent 模板和 Convention 模型吗？

标签： angular typescript

【解决方案1】：

由于它是异步操作，我建议您等到约定获取值使用*ngIf 在约定对象不为空时加载子组件

<ng-container *ngIf="convention$">
<be-form-convention [convention]="convention$"></be-form-convention>
</ng-container>

【讨论】：

@Aymen Kanzari 你试过这个吗？
是的，我试过了，子组件（ConventionFormComponent）的html没有出现
这意味着你的对象总是空的？当你在 subscribe 中执行 console.log(this.convention$) 时你会做什么
它不是空的，当我在 subscribe 中执行 console.log(this.convention$) 时，它会在控制台中显示数据
创建一个 plunker 或 stackblitz

【解决方案2】：

据我了解，当您收到输入或输入值更改时，您想做一些操作。

您可以使用带有 set 功能的输入指令，如下所示：

_convention: Convention;
@Input()
set convention(convention: Convention) {
    this._convention = convention;
    //the code you want to handle after input is received
}

【讨论】：

我试过了，它给了我同样的结果。我必须提到，当我创建一个新对象并将其发送给孩子而不是调用我的服务时，它可以工作。所以我想问题出在它自己的服务中
这种情况下的问题可以是，值是通过引用传递的。所以对象的变化有时不会调用子组件中的任何事件。但它之所以有价值，是因为参考变量是相同的。因此，您可以通过传递具有相同值的新对象引用来发送文本。您也可以尝试通过传递任何类型的对象代替约定，并将输入值传递为 JSON.parse(JSON.stringify(objectvariable));这将创建一个新变量，因此您的子组件应该响应更改。
你是什么意思将输入值传递为 JSON.parse(JSON.stringify(objectvariable));
这将创建一个变量的副本，因此传递的值不会被引用。只是尝试一下，如果问题是因为通过引用传递的值。如果你知道问题，你可以更好地处理它。

【解决方案3】：

对于组件-组件通信，我总是使用服务。

我所做的是：我创建一个服务并创建两个函数（getData 和 setData）。

当我想从一个组件向另一个组件发送一些数据时，我调用 setData 方法，当我想在其他组件中接收数据时，我使用 getData 方法。

这是一个例子：

从 '@angular/core' 导入 { Injectable }；

@Injectable()
export class DataExchange {

  data; //Global Variable of 'any' type.

  setData(data){
this.data = data;
  }

getData():any{
  return this.data;
}
}

【讨论】：