可以将 @Input() 标记为私有或只读吗？

Question

比方说，在 Angular 组件中，我从其父组件接收一个参数。

export class SomethingComponent implements OnChanges {
    @Input() delay: number;
}

private将其标记为或是好的做法、可以接受还是更好readonly？

export class SomethingComponent implements OnChanges {
    @Input() private readonly delay: number;
}

技术上有什么区别？

Answer 1

从纯粹的技术角度来看，两者在运行时实际上都不重要，因为两者都不存在于 Javascript 中。这些构造仅存在于 Typescript 中以帮助开发人员。

这是一些打字稿示例：

class Car {
    private ownerName: string;
    readonly vehicleIdNumber: string;
    mileage: number;
}

let car = new Car();

//typescript compilation error: 
//  Property 'ownerName' is private and only accessible within class 'Car'.
car.ownerName = "test";

//typescript compilation error: 
//  Cannot assign to 'vehicleIdNumber' because it is a read-only property.
car.vehicleIdNumber = "543798";

//No error here!
car.mileage = 10000;

当它被编译为 Javascript 时，这些访问修饰符就会消失，您可以随意使用这些属性。下面是生成的 Javascript 的样子。

class Car {
}

let car = new Car();
car.ownerName = "test";
car.vehicleIdNumber = "543798";
car.mileage = 10000;

从 Angulars 的角度来看，private或者readonly在@Input()属性上并没有真正的意义。

私有成员通常只能在声明它的类的主体内访问。由于您在另一个组件模板的类外部访问它们，所以您违反了此规则。

只读成员通常不允许在构造函数退出后赋值，而在 Angular 中，属性@Input()实际上是在构造函数之后但之前 ngOnInit()设置的。