Javascript 单独编译角度组件并在HTML页面中一起使用_Javascript_Html_Angular_Typescript_Angular Cli

Javascript 单独编译角度组件并在HTML页面中一起使用

javascript html angular typescript

Javascript 单独编译角度组件并在HTML页面中一起使用,javascript,html,angular,typescript,angular-cli,Javascript,Html,Angular,Typescript,Angular Cli,我以以下方式创建了两个不同的Angular项目： $ ng new comp-a $ ng new comp-b 然后，我修改了它们中的每一个，使其看起来不同，并使用它们中的每一个运行以下命令，用必要的Javascript和CSS文件构建相应的HTML文件： $ ng build --base-href "./" - runtime.js - polyfills.js - styles.js - vendor.js - main.js 我注意到在每个项目上生成的每个index.html文件

我以以下方式创建了两个不同的

Angular

项目：

$ ng new comp-a
$ ng new comp-b

然后，我修改了它们中的每一个，使其看起来不同，并使用它们中的每一个运行以下命令，用必要的

Javascript

和

CSS

文件构建相应的

HTML

文件：

$ ng build --base-href "./"

- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js

我注意到在每个项目上生成的每个

index.html

文件上都引用了以下

Javascript

文件：

$ ng build --base-href "./"

- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js

我想做什么：

创建一个公共

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
```
文件，如上面的示例所示

这可能吗

我试了一下，但没有成功。也许，如果可能的话，我没有用正确的方式。我不得不说我没有太多的经验

谢谢

一个角度应用程序中的两个角度组件是您所需要的

为了演示，让我们创建一个新的角度应用程序：

ng new my-app

ng serve --open

转到“角度应用程序”文件夹：

cd my-app

请注意刚刚创建的index.html文件。上面提到的常见HTML可以驻留在此index.HTML文件中。只需保留

标记，其他所有内容都可以根据需要进行替换

然后，创建两个角度组件：

ng generate component comp1
ng generate component comp2

在app.component.html文件中进行编辑，以便此引导组件将包装这两个最近创建的角度组件：

ng generate component comp1
ng generate component comp2

app.component.html：

<app-comp1></app-comp1>
<app-comp2></app-comp2>

你应该看到这样的情况：

<!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>

comp1工作！comp2工作

如果使用angular 6，则应将这两个组件创建为库。angular6 cli刚刚获得了支持。如果我创建一个库，而不是像这样创建组件：

$ng generate component modules/comp-a

和

$ng generate component modules/comp-b

，这取决于您的需求。如果组件仅用于此项目，则这是一种方法。如果组件需要在多个项目中使用，最好将它们提取到它们自己的库中。我希望像这样使用它们：

，

在一个普通的

html

文件中，而不是在

Angular

项目中（当然，在编译它们之后）。用法应该类似于我在上面的帖子中指定的用法。如果你想在角度项目之外使用它们，你就不需要角度组件。在那之后，我可以像这样使用它们：

，

在普通的

html

文件中，而不是在

角度项目内部（当然，在编译它们之后），喜欢我在上面的帖子上指定的内容吗？