如何在Angular中将整个对象从父组件传递给子组件?

Question

我有一个对象，其中的所有属性都需要传递给子组件。一个接一个地过去实在太慢了。

在Angular中是否有类似的方法可以在React中实现?

import { Component, Input } from '@angular/core';
@Component({
selector: 'app-demo',
template: `
<p>
{{name}}-{{age}}
</p>
`
})
export class DemoComponent {
@Input() name: string = '';
@Input() age: number = 0
}

import { Component } from '@angular/core';
@Component({
selector: 'app-use',
template: `
<p>
use works!
</p>
<!-- Syntax similar to React, Pass in all at once, not one by one -->
<app-demo ...demoInject></app-demo>
`,
styleUrls: ['./use.component.css']
})
export class UseComponent {
demoInject = {
name: 'tom',
age: 20
}
}

Answer 1

在Angular中，你通常会像这样将对象从父组件传递给子组件:

首先父组件:

@Component({
selector: 'app-use',
template: `
<p>
use works!
</p>
<!-- Syntax similar to React, Pass in all at once, not one by one -->
<app-demo [demoDto]="demoInject"></app-demo>
`,
})
export class UseComponent {
demoInject = {
name: 'tom',
age: 20
} as DemoDto;
}

子组件:

@Component({
selector: 'app-demo',
template: `
<p *ngIf="demoDto">
{{demoDto.name}}-{{demoDto.age}}
</p>
`
})
export class DemoComponent {
@Input()
demoDto!: DemoDto;
}