使用@input 和@output 在角度组件之间传输数据[重复]答案

【问题标题】：Transfer data between angular components using @input and @output [duplicate]使用@input 和@output 在角度组件之间传输数据[重复]
【发布时间】：2020-01-14 00:57:15
【问题描述】：

我有两个组件并排放置。

    settings folder
      |--settings.component.css
      |--settings.component.html
      |--settings.component.ts
      |-- userPRofile folder
            |-- userProfile.component.css
            |-- userProfile.component.html
            |-- userProfile.component.ts

现在在设置组件中，我在 OnInit 时获得了一些带有函数的数据。

    this.service.getUserSettings().subscribe(
       res => {
         this.userSettings = res;

现在我希望将这些数据发送到 userProfile 组件。我怎样才能做到这一点？

【问题讨论】：

可以分享设置组件的模板吗？
请分享您的 Html 和 ts 文件，以便我们提供直接的解决方案
有问题，您可以看到我获取 res 变量并将其放入 this.userSettings 中的 settings.ts 部分。现在我希望 userProfile.ts 得到那个 userSettings 变量。例如考虑干净的 userProfile.ts 文件

标签： angular input components output data-transfer

【解决方案1】：

你只需要使用属性绑定将数据传递给子组件

设置组件模板

<app-user-profile [data]="userSettings"></app-user-profile>

userProfile.ts

@Input() data:any;

现在来自userSettings 的值将传递给data 属性。

【讨论】：

我想使用 userProfile 组件中的设置组件中的数据。你能写更详细的例子吗？我看不懂这个
从父组件，你可以将数据传递给子组件是子组件，父组件正在传递data , userSettings 直接传递给 child .
@David 我已经更新了答案还不清楚吗？
据我了解设置组件是 html 文件？但我想要一些不同的东西。我的意思是我在 settings.ts 文件中创建了一些变量，并想在 userProfile.ts 中使用它如何从 settings.ts>userProfile.ts 发送????
@David 查看这个演示 stackblitz.com/edit/angular-pr6rpd

【解决方案2】：

In settings component template html User
<app-user-profile (open)="onOpen($event)"  [data]="userSettings"></app-user-profile>
 onOpen():void{
// code goes here
}

In UserProfile.ts 
@Input() data:any;
@Output() open: EventEmitter<any> = new EventEmitter();

【讨论】：