Angular 10中@Input与依赖注入：能否用实例化父类替代@Input传值？

Great question! Let's break this down clearly so you understand why one approach is way better than the other.

Can you use constructor injection of the parent component to get values instead of @Input? #

Technically, yes — you can inject a parent component instance into a child's constructor and access its variables directly, like this:

// Child component
constructor(private parentComp: ParentComponent) {
  // Access parent's variable
  console.log(this.parentComp.parentVariable);
}

But this only works if the parent is the direct ancestor of the child in the component tree, and Angular's DI system can resolve the parent instance. That said, this is never a recommended practice in Angular, and here's why the two approaches are not equivalent at all.

Key Differences Between the Two Approaches #

Let's walk through the critical distinctions:

• Coupling Level

  • @Input creates loose coupling: The child only cares about the value being passed, not the parent's type. You can reuse the child with any parent component that provides the right value type.
  • Injecting the parent instance creates tight coupling: The child depends entirely on the parent's class structure. If the parent renames a variable, changes its type, or gets refactored, the child will break immediately. No reuse possible here.

• Data Flow Clarity

  • @Input makes data flow explicit: You can see exactly what's being passed to the child right in the template (e.g., <app-child [childInput]="parentVar"></app-child>). Debugging and maintaining this is straightforward.
  • Injecting the parent hides the data flow: No one looking at the template will know the child is accessing parent variables — you have to dig into the child's constructor logic to find this. This becomes a nightmare in large codebases.

• Change Detection & Lifecycle

  • @Input integrates with Angular's change detection: When the parent's value changes, Angular automatically updates the child and triggers the ngOnChanges hook, so you can react to updates easily.
  • Injecting the parent gives no built-in change notifications: If the parent's variable updates, the child won't know unless you manually set up subscriptions or listeners. This often leads to out-of-sync views and bugs.

• Component Reusability

  • @Input is designed for reusability: A child component with inputs can be dropped anywhere in your app, as long as you pass the required values.
  • Parent-injected components are locked to their parent: You can't use this child anywhere else — it's tied directly to that specific parent component.

• Angular Design Philosophy

  • Dependency Injection (DI) in Angular is meant for services — shared, stateless logic that can be reused across components. It's not intended for component-to-component data passing. @Input is the official, idiomatic way to handle parent-to-child data flow.

Final Takeaway #

While injecting the parent component works technically, it's an anti-pattern that goes against Angular's core design principles. It makes your code brittle, hard to maintain, and impossible to reuse. Stick with @Input for parent-to-child data transfer — it's the right tool for the job.

内容的提问来源于stack exchange，提问作者K.Sudha Snigdha