如何从源组件初始化通过@Input()接收的ServiceId参数？

一、从父组件初始化子组件的@Input属性 #

有两种常用实现方式：

1. 模板绑定（最常用） #

在父组件模板中，通过属性绑定直接给子组件的ServiceId传值：

• 传递固定数值：

<app-child [serviceId]="100"></app-child>

• 传递父组件类中的变量：
  父组件类定义变量：

parentServiceId = 100;

模板中绑定该变量：

<app-child [serviceId]="parentServiceId"></app-child>

注意：Angular模板中属性名支持小驼峰（serviceId）或短横线分隔（service-id），对应子组件类中的大驼峰命名ServiceId。

2. 父组件类中通过实例引用赋值 #

如果需要在父组件逻辑中动态设置，可通过ViewChild获取子组件实例后赋值：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComp!: ChildComponent;

  ngAfterViewInit(): void {
    this.childComp.ServiceId = 100;
  }
}

二、能否直接给@Input装饰的属性赋值？ #

完全可以，但要遵循Angular的单向数据流规则：

• 子组件内部可以直接赋值，比如你当前写的@Input() ServiceId: number=21;就是设置默认值的合法写法；也可以在生命周期钩子、自定义方法中修改该属性的值。
• 但如果父组件后续更新了绑定的ServiceId值，子组件内部的赋值会被父组件的新值覆盖——因为Angular的输入绑定是父到子的单向数据流，父组件的变更会同步到子组件。

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