如何在 Angular 7 项目中集成 html 模板

Posted 2023-03-13

【中文标题】如何在 Angular 7 项目中集成 html 模板

【英文标题】：how to integrate a html template in angular 7 project

【发布时间】：2019-09-13 11:39:39

【问题描述】：

我在 Angular 7 项目中集成了一个 html 模板，但它无法正常工作

我在 assets/template/.. 下添加了模板文件，并在 angular.json 中添加了导入，例如：

"styles": ["src/assets/template/css/style-customizer.css",...], “脚本”：[“src/assets/template/js/vendor/modernizr-2.8.3.min.js”,...]

我编辑了html代码：

删除了 doctype 和 html 标签 删除了所有标题 删除了所有的 css 和 js 导入 编辑了图片来源

（如 src="/assets/template/img/slider/1.jpg" title="#htmlcaption1"）

我在 app-root 标签下的 index.html 中添加了 html 代码，一切正常

但是当我把它改成 app.component.html 时：

部分图片未显示 某些 CSS 无法正常工作 还有一些动画不工作

我的控制台没有任何错误

【问题讨论】：

见this教程

在视频中，他下载了一个预先准备好的带有集成主题的 Angular 项目，然后他运行“npm install”来下载库，这不是我需要的。我已经有一个正在进行的项目，我想集成一个 html 主题（不是 Angular 主题）

@HassenTayech。您找到解决问题的方法了吗？

【参考方案1】：

我通常不会在 angular.json 中使用样式数组， 相反，我在样式 .css 中导入所有全局样式，因为它默认设置为 angular.json 样式数组。

/* You can add global styles to this file, and also import other style files */

@import "assets/quote.css";

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:200|Josefin+Sans:300|Julius+Sans+One|Merriweather+Sans:400|Overpass:400|Quicksand"

【参考方案2】：

只需在@component 中添加encapsulation: ViewEncapsulation.None，如下所述。

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
)