Question

因此，我使用Angular 7开发了Web应用程序，但是该组件之一是使用旧项目中的复杂样式，因此我打算将静态旧项目中的静态HTML，CSS和JS粘贴到Angular组件之一中，怎么做？

即，我想在Angular组件中粘贴以下HTML结构：

<html>
<head>
   ...
   ...
   <link rel="stylesheets"..
   <link rel="stylesheets"..
   <link rel="stylesheets"..
</head>
<body>
   ...
   ...
   ...
   <script src="...
</body>
</html>

请注意，我需要在该静态页面上使用CSS和Script，并且仅包含在单个Angular组件中，我知道在angular.json中声明了我们的项目需要的全局CSS和JS，但是在此如果我不需要全局CSS或全局JS，仅包含在该组件中，如此，该怎么做？

Answer 1

如果只希望某些样式包含在单个Angular组件中，则可以在模板上使用内联样式进行定义。

1）使用@Display(Model.Tail)标签包装样式：

style

2）模板标记中的常规内联样式：

@Component({
  template: `
    <style>
    h1 {
      color: blue;
    }
    </style>
    <h1>This is a title.</h1>
    `
})

您还可以在模板中包含脚本标签，以在每次使用此组件时导入JS文件。

3）另外，您也可以通过在组件的CSS文件中使用@Component({ template: '<h1 style="color:blue">This is a title.</h1>' })来导入CSS文件：

@import

如何在Angular 2中添加完整的HTML，CSS和JS

1 个答案: