Question

我试图将数据从子组件传递回父元素（角度4）。这些数据来自“表格”输入＆＃39;用户可以在哪里插入一些信息。不幸的是，信息不会回到父元素。我正在寻找解决方案，有人可以帮助我吗？我的代码......

将父元素的信息发送到子组件：

<app-fix-period
    [fixPeriodChoices]="model.fix_period"
    [date_time_start]="model.date_time_start"
    [date_time_end]="model.date_time_end"
    [begin_hour]="begin_time.hour"
    [begin_minute]="begin_time.minute"
    [finish_hour]="end_time.hour"
    [finish_minute]="end_time.minute">
  </app-fix-period>

在组件上......在表单中，我使用用户数据填充输入，但没有任何内容返回到父级。

<div class="form-group">
    <label>Inicio</label>
    <wr-calendar [(ngModel)]="date_time_start" name="date_time_start" [style]="{ width: '100%' }">
    </wr-calendar>
</div>

组件......

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-fix-period',
  templateUrl: './fix-period.component.html',
  styleUrls: ['./fix-period.component.scss'],
  inputs: [
    'fixPeriodChoices', 
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour',
    'finish_minute'
  ],
  outputs: [
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour',
    'finish_minute'
  ]
})

export class FixPeriodComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

soo ..我很感激任何帮助

Answer 1

有几种不同的方法可以将信息从孩子传递给父母。

1）您可以使用@Output装饰器，如下所示：https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/

2）您可以使用服务来保留和传递数据，如下所示：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Answer 2

我们可以使用输入将数据传递给子控件，使用输出传递给父控件。

有许多方法可以通过使用服务来共享数据，确保您没有在每个组件上使用提供程序，而只在app.module.ts中使用提供程序，否则每个组件都将创建它自己的实例。

使用输入＆amp;输出装饰器见Angular component communication by using Input Output decorator

将数据发送到子组件e传回数据

2 个答案: