Angular将数据从子组件传递到父组件

17 浏览
0 Comments

Angular将数据从子组件传递到父组件

我正在学习/工作于Angular项目，我已经做了很多工作，并尽力按照“正确的方式”进行。现在我想做的是：

我想从子组件获取变量（输出）到父组件，但我不想使用输出，也不想监听它，我希望在父组件需要时获取它，就像child.getVariable()这样。我看到一个帖子说我应该使用childview，但问题与我的不同，所以我想知道使用childview从子组件获取数据是不是一种好的实践？

0

3 答案

0 Comments

Angular中，从子组件向父组件传递数据的需求是常见的。为了实现这个目标，可以使用ViewChild来访问子组件。

在上述代码中，我们可以看到一个名为CountryCodesComponent的子组件被导入并在父组件中进行了定义。然后，我们定义了一个名为countryCodes的变量来引用这个子组件，并且还定义了一个名为nationalPhoneNumber的变量。

在constructor中，我们没有做任何特殊的操作。但是，在phoneNumber的getter方法中，我们使用了this.countryCodes.countryCode来获取子组件的countryCode属性，并且与nationalPhoneNumber拼接起来返回。

通过这种方式，我们成功地将子组件的数据传递给了父组件。这种方法可以同步地访问子组件的数据，非常方便。

总结起来，为了在Angular中从子组件向父组件传递数据，可以使用ViewChild来访问子组件，并通过定义一个变量来引用子组件。通过这种方式，我们可以方便地获取子组件的数据，并在父组件中进行处理。

0
0 Comments

在Angular中，将数据从子组件传递给父组件是一个常见的需求。以下是解决这个问题的原因和方法。

问题的原因：

当我们在Angular应用程序中需要将数据从子组件传递给父组件时，我们需要一种机制来实现这个功能。因为子组件和父组件是通过不同的模块加载和渲染的，所以它们之间不能直接共享数据。因此，我们需要使用一种方法来在子组件中传递数据，并在父组件中接收和使用这些数据。

解决方法：

在子组件中，我们可以使用EventEmitter来定义一个事件，并在需要传递数据的地方触发该事件。然后，在父组件中监听这个事件，并在事件被触发时执行相应的操作。

具体步骤如下：

1. 在子组件中，注册一个事件发射器(EventEmitter)：

() onDatePicked: EventEmitter = new EventEmitter();

2. 在子组件中，当需要传递数据时，触发该事件：

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

3. 在父组件的模板中，监听这个事件并执行相应的操作：

4. 在父组件中，实现监听事件的方法，并在方法中接收和处理子组件传递过来的数据：

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

通过以上步骤，我们可以在子组件中通过事件发射器传递数据，并在父组件中监听并处理这些数据。

参考文献：[stackoverflow.com/a/42109866/4697384](http://stackoverflow.com/a/42109866/4697384)

以上是从[stackoverflow.com/questions/42107167](https://stackoverflow.com/questions/42107167)复制的答案。

0
0 Comments

在Angular中，当我们需要从子组件向父组件传递数据时，可以使用以下方法：

通过上述代码，我们可以在父组件的模板中访问`#childComponentRef`的变量。如果仅仅需要在父组件的模板中访问子组件的变量，这种方法就足够了。

如果需要更灵活的传递数据方式，Angular团队建议使用共享服务（shared services）。具体可以参考官方文档：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service。

共享服务可以在父组件和子组件之间建立一个中间层，用于传递数据。这种方式更加灵活，能够满足更复杂的需求。

0