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

Question

So, i develop web app using Angular 7, one of the component however is using complex styling from old project, so i plan to just paste static HTML, CSS, and JS from static old project to one of the Angular component, how to do it? 因此，我使用Angular 7开发了Web应用程序，但是该组件之一是使用旧项目中的复杂样式，因此我打算将静态旧项目中的静态HTML，CSS和JS粘贴到Angular组件之一中，该怎么办它？

ie, I want to paste following HTML structure in Angular component: 即，我想在Angular组件中粘贴以下HTML结构：

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

Notice that i need to use CSS and Script on that static page and only contained in single Angular component, i'm aware of declaring global CSS and JS that we need for our project in angular.json , however in this case i dont need global CSS or global JS, only contained on that one component, so , how to do it? 请注意，我需要在该静态页面上使用CSS和Script，并且仅包含在单个Angular组件中，我知道在angular.json中声明了我们的项目所需的全局CSS和JS，但是在这种情况下，我不需要global CSS或全局JS，仅包含在该组件中，那么，该怎么做？

Answer 1

If you only want certain styles contained in a single Angular component then you can define then with inline styles on your template. 如果只希望单个Angular组件中包含某些样式，则可以在模板上使用内联样式进行定义。

1) Wrap styles with style tag: 1）使用style标签包装样式：

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

2) Normal inline styles in the template tags: 2）模板标签中的常规内联样式：

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

You can also include the script tags in your template to import a JS file whenever you're using this component. 您还可以在模板中包括脚本标签，以在每次使用此组件时导入JS文件。

3) Alternatively you can import the CSS files by using @import in your CSS file for the component: 3）或者，您可以通过在组件的CSS文件中使用@import来导入CSS文件：

@Component({
  template: '<h1>This is a title.</h1>',
  style: '@import url("custom.css");'
})

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

问题描述

1 个解决方案

解决方案1
0 2019-01-14 15:57:32

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

问题描述

1 个解决方案

解决方案1 0 2019-01-14 15:57:32

解决方案1
0 2019-01-14 15:57:32