使用@input 和@output 在 angular 个组件之间传输数据

Question

我有两个组件放在一起。

    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 组件。我怎样才能做到这一点？

Answer 1

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

设置组件模板

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

userProfile.ts

@Input() data:any;

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

Answer 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();

使用@input 和@output 在 angular 个组件之间传输数据

Transfer data between angular components using @input and @output

components

data-transfer

input

output

angular