我按以下方式创建了 2 个不同的 Angular 项目:
$ ng new comp-a
$ ng new comp-b
然后，我修改了它们中的每一个，使其看起来不同，并且我对它们中的每一个都运行了以下命令，以使用必要的 Javascript 和 构建相应的 文件:HTML 文件>CSS
$ ng build --base-href "./"
我注意到在每个项目生成的每个 index.html 文件中都引用了以下 Javascript 文件:
- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js
我想做什么:
创建一个引用公共(public)文件并将非公共(public)文件重命名为组件名称的公共(public) HTML 文件，如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing Angular Components</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<comp-a></comp-a>
<comp-b></comp-b>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="comp-a.js"></script>
<script type="text/javascript" src="comp-b.js"></script>
</body>
</html>
我的目标要求:
- 我需要为每个组件生成一个
Javascript文件。 - 我需要在
Angular项目中使用它们，就像在上面示例中的普通HTML页面中一样。当然，我可以像上面的示例一样添加其他常见的Javascript文件。
这可能吗？
我试过了，没用。也许，如果可能的话，我没有以正确的方式。我不得不说我对 Angular 没有太多经验。
谢谢!
最佳答案
您需要在单个 Angular 应用程序中使用两个 Angular 组件。
为了演示，让我们创建一个新的 Angular 应用程序:
ng new my-app
转到 Angular 应用程序文件夹:
cd my-app
注意刚刚创建的 index.html 文件。您上面提到的通用 HTML 可以驻留在这个 index.html 文件中。只保留 <app-root></app-root>标签和其他所有内容都可以根据需要进行替换。
然后，创建两个 Angular 组件:
ng generate component comp1
ng generate component comp2
在 app.component.html 文件中进行编辑，以便此 Bootstrap 组件包装这两个最近创建的 Angular 组件:
应用程序组件.html:
<app-comp1></app-comp1>
<app-comp2></app-comp2>
测试您的 Angular 应用程序:
ng serve --open
你应该看到这样的东西:
comp1 works! comp2 works!
关于javascript - 单独编译 Angular 组件并在 HTML 页面中一起使用它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50310835/