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

Posted 2023-02-22

【中文标题】使用@input 和@output 在角度组件之间传输数据[重复]

【英文标题】：Transfer data between angular components using @input and @output [duplicate]

【发布时间】：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 文件

【参考方案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();