Angular 为什么我们在数组中传递样式，在组件中传递样式？

为什么我们在Angular模板中的组件中传递数组中的样式？

请参阅以了解更多信息并查看给出的示例。您可以将多个CSS样式作为数组添加到该

组件中。
比如说,

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css'],
  styles:[
  `


  `],
})

@组件({
选择器：“英雄应用程序”，
模板：`
英雄之旅
副标题
`,
样式：['h1{字体大小：正常；字体大小：20px；}'，'h2{字体大小：14px；}']
})
导出类组件{
/* . . . */
}
对于模板，每个组件只能使用一个HTML模板文件。但对于样式，它允许您为特定组件添加多个CSS文件
 对于angular中的每个组件，您可以用三种方式编写样式，但您可以仅使用样式surl或样式，但不能同时使用这两种方式

示例-1：您可以只声明一个带有html和内联CSS的模板

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <h2>Sub Heading</h2>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { font-weight: normal; font-size: 20px; }', 'h2 { font-size: 14px; }']
})
export class HeroAppComponent {
/* . . . */
}

示例-3：在这种情况下，您可以直接编写CSS，而不是维护
一个单独的.CSS文件

    @Component({
      selector: 'app-course',
       templateUrl: './course.component.html',
      styleUrls: ['./course.component.css'],  
    })

因为您可以在一个组件中添加多个css文件StyleUrls是一个数组，所以您可以向组件添加多个样式。有关详细信息，请参考有关组件样式的Officel文档。我理解你的观点，但我的问题是，为什么我们将其作为数组传递，而不像在模板内联样式中那样。问题是为什么我们使用ArraI我同意我们可以在StyleURL中绑定多个CSS文件，但在样式中，我们传递的是具有多个CSS属性的单个样式，那么为什么我们在数组中发送它
    @Component({
      selector: 'app-course',
       templateUrl: './course.component.html',
      styleUrls: ['./course.component.css'],  
    })

    @Component({
      selector: 'app-course',
       templateUrl: './course.component.html',
       styles: ['p { font-weight: normal; }']  
    })