Supongamos que tenemos un Customer de interfaz:
export interface Customer { name: string; age: number; phone: string; } Ahora tenemos un componente principal y queremos pasar una instancia de Customer al componente secundario:
<child-component [customer]="instanceOfCustomer"></child-component> Después de eso, necesitamos usar el decorador @Input para obtener los datos en el componente secundario. (Suponemos que pasar la instancia es obligatorio para usar este componente y este componente no funcionará sin pasar la instancia)
@Input() customer:Customer;El problema es que necesitamos inicializar el cliente en alguna parte y creo que hay 3 enfoques para evitar el error en Typescript:
Inicializando un customer vacío en el constructor :
this.customer = { name: ""; age: 0; phone: ""; } Cambie strictPropertyInitialization a falso
Solo agregando el ! prefijo (que creo que debería usar porque nadie debería usar este componente secundario sin pasar el cliente relativo)
@Input() customer!:Customer; Quiero saber qué enfoque debo usar para evitar el error de inicialización de propiedad en caso de usar el decorador @Input .
debe usar setter https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter
o también puede usar su 3rd enfoque.
ya hay algunas respuestas para esto también.
consulte las respuestas a continuación para obtener más detalles:
Para evitar que TS se queje, sugeriré inicializarlo así:
@Input() customer: Customer | null = null;El uso de null evitará que el compilador se queje cuando pase la entrada a través de la tubería asíncrona (la tubería asíncrona devuelve algo como T | nulo).
Además, al hacer eso, tendrá que asegurarse de tener en cuenta los valores nulos donde sea que use esa propiedad, por lo que menos errores con los que lidiar en producción si algo sale mal, digamos.