Angular 11中@Input修饰的slides属性未填充，{Slide}与Slide[]是否相同？

你开发时用到的核心代码如下：

carousel.interface.ts #

export interface Slide {
  headline?: string;
  src: string;
}

carousel.component.ts #

import { Component, Input } from '@angular/core';
import { Slide } from './carousel.interface';

@Component({
  selector    : 'carousel',
  templateUrl : './carousel.component.html',
  styleUrls   : ['./carousel.component.scss'],
})

export class CarouselComponent {

  @Input() slides: Slide[]; 

  currentSlide = 0;

  constructor() { }
}

1. { Slide } 和 Slide[] 是否为相同类型？ #

二者完全不是相同类型，区别如下：

• { Slide } 是对象类型：表示该值是一个对象，对象内部包含一个名为Slide的属性，属性值符合你定义的Slide接口结构，示例合法值：

const slideObj: { Slide } = {
  Slide: {
    src: 'https://example.com/1.jpg',
    headline: '轮播图1'
  }
}

• Slide[] 是数组类型：表示该值是一个数组，数组的每一个元素都符合Slide接口结构，示例合法值：

const slideList: Slide[] = [
  { src: 'https://example.com/1.jpg', headline: '轮播图1' },
  { src: 'https://example.com/2.jpg' }
]

2. 为什么slides属性没有被填充值？ #

你代码里的slides是被@Input()装饰的组件输入属性，它的值需要由父组件调用<carousel>标签时通过属性绑定传入，调用示例如下：

<!-- 父组件模板调用carousel组件示例 -->
<carousel [slides]="父组件内定义的符合Slide[]类型的数组变量"></carousel>

你没有在当前组件内给slides设置初始值，也没有在构造函数中为它赋值，如果父组件没有传入对应的值，slides自然不会有内容。

如果你是遇到了TS严格模式下「属性没有初始化也没有在构造函数中赋值」的报错，且你确定父组件一定会传入该值，可以给属性添加非空断言操作符规避报错：

@Input() slides!: Slide[];

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