如何在HTML中通过Angular组件属性传递对象引用以简化多属性传值？

Nice catch—passing multiple individual properties to a child component can quickly get clunky. Let's fix this with a cleaner approach using an object, which will eliminate that redundant code.

Recommended Approach: Use a Single Object Input (Clean & Maintainable) #

This is the best practice because it reduces repetition and makes your code easier to update later. Here's how to implement it:

1. Wrap Your Properties in an Object (Parent Component) #

In your parent's TypeScript file, create an object that contains all the properties you need to pass. Thanks to object shorthand, you don't have to repeat key-value pairs if your variable names match the keys:

// Parent component (.ts)
username = "srihari_g";
designation = "Full Stack Developer";
userId = "user_123";

// Combine all properties into one object
userProfileData = { username, designation, userId };

2. Update the Child Component to Accept the Object #

Modify your UserProfilePhotoComponent to accept a single input that takes the entire object. For better type safety, define an interface (you can put this in a shared file if you need it elsewhere):

// Child component (.ts)
import { Input } from '@angular/core';

// Interface to define the structure of our user profile data
interface UserProfile {
  username: string;
  designation: string;
  userId: string;
}

@Component({
  selector: 'app-user-profile-photo',
  // ... your component's template and styles metadata
})
export class UserProfilePhotoComponent {
  // Replace individual inputs with a single object input
  @Input() userProfile: UserProfile | undefined;
}

3. Pass the Object to the Child (Parent Template) #

Now you can pass the entire object to the child with just one binding—no more listing each property separately:

<!-- Parent component template -->
<app-user-profile-photo [userProfile]="userProfileData"></app-user-profile-photo>

4. Access the Properties in the Child Template #

Inside the child's template, you can access each property from the object like this:

<!-- Child component template -->
<div *ngIf="userProfile">
  <img src="/assets/profiles/{{ userProfile.userId }}.jpg" alt="{{ userProfile.username }}">
  <h3>{{ userProfile.username }}</h3>
  <p>{{ userProfile.designation }}</p>
</div>

What If I Can't Modify the Child Component? #

If you're working with a third-party component or can't change the child's inputs, Angular doesn't support the React-style {...object} spread directly in templates. In that case, you'll still need to list each property, but you can use the object to avoid repeating the original variables:

<!-- Parent template (no child modifications) -->
<app-user-profile-photo 
  [username]="userProfileData.username"
  [designation]="userProfileData.designation"
  [userId]="userProfileData.userId"
></app-user-profile-photo>

This is slightly cleaner than using individual variables directly, but it still requires listing each property.

Bonus: Type Safety Tips #

Using interfaces (like we did in Step 2) ensures that you don't accidentally miss a property or pass the wrong data type. If you're using Angular 14+, you can even use required: true in the @Input() decorator to enforce that the object is always passed:

@Input({ required: true }) userProfile!: UserProfile;

内容的提问来源于stack exchange，提问作者Srihari GouthamGr