在Angular中将父组件实例作为子组件属性的实现方式是否可行？该方式存在哪些弊端？

这种做法虽然用起来顺手，但从组件设计、可维护性、复用性等多个角度来看，都是非常糟糕的选择，具体问题如下：

• 彻底破坏组件封装性
  组件设计的核心原则之一是封装——每个组件应该只关心自己的内部逻辑，对外只暴露明确的接口（Input/Output）。你直接在子组件里访问父组件的属性和方法，相当于把父组件的内部实现细节暴露给了子组件。一旦父组件的属性名、方法签名或内部逻辑发生变化，子组件会直接崩溃，而且这种依赖关系非常隐蔽，难以排查。

• 子组件完全失去复用能力
  现在你的ChildComponent构造函数硬依赖了ParentComponent，这意味着它只能在ParentComponent的嵌套结构中使用。如果以后想在其他父组件里复用这个子组件，根本做不到——Angular的依赖注入系统会找不到ParentComponent的实例，直接抛出错误。组件的复用性是Angular这类框架的核心价值之一，这种做法直接废掉了这个特性。

• 误解了Angular依赖注入的用途
  你能成功注入ParentComponent，只是因为当前子组件恰好嵌套在父组件内部，Angular的DI会向上遍历组件树找到最近的ParentComponent实例。但这不是DI的正确用法——DI是用来注入服务、依赖项的，不是用来直接获取父组件实例做组件间通信的。Angular专门设计了@Input/@Output、ViewChild/ContentChild、共享服务等方式来处理组件间交互，每种方式都有明确的适用场景，而直接注入父组件是一种非常hack的做法。

• 数据流向完全不可追踪
  当子组件直接修改父组件的属性时，整个应用的数据流向变得模糊不清。其他开发者（甚至几周后的你自己）在调试时，根本不知道这个属性值是被哪个组件修改的。而使用@Input/@Output的话，数据流向非常清晰：父组件通过输入传递数据，子组件通过输出事件通知父组件修改数据，所有交互都有明确的痕迹。

• 可能触发变更检测异常
  Angular的变更检测机制是基于输入属性的变化来触发的。如果子组件直接修改父组件的属性，Angular可能无法正确检测到这个变化，导致视图不更新，或者出现奇怪的变更检测循环问题。而使用@Input的话，Angular会自动监听输入属性的变化，确保变更检测正常运行。

正确的替代方案 #

场景1：子组件需要父组件的数据或方法结果 #

使用@Input让父组件传递数据或计算后的结果：

父组件代码：

@Component({
  selector: 'parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})
export class ParentComponent implements OnInit {
  someParentProperty: number = 10;
  constructor() {}
  ngOnInit() {}
  someParentMethod = (num) => num**2;
}

父组件模板：

<child-component [parentValue]="someParentProperty" [calculatedValue]="someParentMethod(someParentProperty)"></child-component>

子组件代码：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponent implements OnInit {
  someChildProperty: number;
  @Input() parentValue: number;
  @Input() calculatedValue: number;

  ngOnInit() {
    this.someChildProperty = this.calculatedValue;
  }
}

场景2：子组件需要修改父组件的属性 #

使用@Output触发事件，让父组件自己修改属性：

子组件代码：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponent implements OnInit {
  someChildProperty: number;
  @Input() parentValue: number;
  @Output() updateParentValue = new EventEmitter<number>();

  ngOnInit() {
    this.someChildProperty = this.parentValue ** 2;
  }

  // 假设子组件有个按钮触发修改
  onModifyParent() {
    this.updateParentValue.emit(20); // 通知父组件修改值
  }
}

父组件模板：

<child-component [parentValue]="someParentProperty" (updateParentValue)="someParentProperty = $event"></child-component>

场景3：父子组件需要共享复杂逻辑 #

如果父子组件有共同的业务逻辑，应该把逻辑封装到共享服务中，而不是让子组件依赖父组件：

@Injectable({ providedIn: 'root' })
export class SharedService {
  calculateSquare(num: number): number {
    return num ** 2;
  }
}

然后在父子组件中注入这个服务即可调用逻辑，完全解耦。

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