Question

res.json();

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

Answer 1

请参阅this以阅读更多内容并查看给出的示例。您可以将多个CSS样式作为数组添加到component。例如，

@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 {
/* . . . */
}

Answer 2

StyleUrls是一个数组，因此您可以为组件添加多个样式。有关更多信息，您应该参考有关组件样式的官方文档。 Components style documentation

Answer 3

对于模板，每个组件只能使用一个HTML模板文件。但对于样式，它允许您为该特定组件添加多个CSS文件。

Answer 4

对于 angular 中的每个组件，您可以通过三种方式编写样式，但您可以仅使用 stylesUrl 或 styles，但不能同时使用两者。

示例 -1：您可以仅使用 html 和内联 CSS 声明模板。

      @Component({
      selector: 'app-course',
      template:`<p style="font-size:12px;color:red'> Welcome to the world of coding </p>`,
      })

示例 -2：在这种情况下使用 styleUrls，其中您提供了多个 .CSS 文件名及其路径。

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

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

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

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

4 个答案: