Angular中将父组件作为输入传入子组件：是否为不良实践？

这种把父组件实例通过@Input传递给子组件的做法并不常见，而且绝大多数情况下属于不良实践，具体原因和替代方案如下：

为什么这是不良实践？ #

• 强耦合导致复用性丧失：子组件直接依赖父组件的具体类，意味着它只能在该父组件的上下文里使用，无法轻松移植到其他场景。只要父组件的方法、属性结构发生变动，子组件都可能出现报错，维护成本极高。
• 破坏单向数据流原则：Angular的核心设计理念之一是单向数据流——父组件通过@Input向子组件传递数据，子组件通过@Output向父组件发送事件通知。直接传递父组件实例会让子组件可以直接修改父组件的内部状态，数据流变得混乱，后续排查问题时很难追踪状态变化的源头。
• 测试复杂度飙升：编写子组件的单元测试时，你需要模拟整个父组件的实例，而不是只提供子组件真正需要的属性或回调函数，这会让测试用例变得臃肿且难以维护。

推荐的替代方案 #

1. 仅传递子组件所需的具体数据 #

如果子组件需要父组件的部分数据，直接传递对应的属性而非整个父组件：
父组件模板：

<div>
    <app-child [user]="currentUser"></app-child>
</div>

子组件类：

@Component({
    selector: 'app-child',
    templateUrl: './child .component.html',
    styleUrls: ['./child .component.css']
})
export class ChildComponent {
    @Input() user: User;
}

2. 用@Output实现子向父的通信 #

如果子组件需要触发父组件的操作，通过EventEmitter发送事件：
子组件类：

@Component({
    selector: 'app-child',
    templateUrl: './child .component.html',
    styleUrls: ['./child .component.css']
})
export class ChildComponent {
    @Output() onActionTriggered = new EventEmitter<void>();

    handleButtonClick() {
        this.onActionTriggered.emit();
    }
}

父组件模板：

<div>
    <app-child (onActionTriggered)="handleChildAction()"></app-child>
</div>

3. 共享服务处理复杂交互 #

如果父子组件需要共享复杂的状态或业务逻辑，抽离到独立的服务中，通过依赖注入让双方获取服务实例：

@Injectable({ providedIn: 'root' })
export class SharedService {
    private dataSubject = new BehaviorSubject<any>(null);
    data$ = this.dataSubject.asObservable();

    updateData(newData: any) {
        this.dataSubject.next(newData);
    }
}

父子组件都通过构造函数注入该服务，实现状态共享和交互。

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