Question

我需要实现以下目标。能否请你给我一些建议或建议，朝着正确的方向前进？感谢。

目标：

通过添加所需的index.html引用来完成文件CSS AND JAVASCRIPT（下面的代码），以便它可以呈现组件：{<mat-select />，<mat-slide-toggle />，<mat-datepicker />从这里取出：https://material.angular.io/components。

可能需要在JAVASCRIPT CONFIGURATION CODE代码中添加一些head / script。

<!-- file: index.html -->

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8" />

<!-- BEGIN OF CSS AND JAVASCRIPT -->
<link rel="stylesheet" type="text/css" href="..." />
...
<script type="text/javascript" src="..."></script>
...
<!-- END OF CSS AND JAVASCRIPT -->

<script type="text/javascript">
// BEGIN OF JAVASCRIPT CONFIGURATION CODE
...
// END OF JAVASCRIPT CONFIGURATION CODE
</script>

</head>

<body>

    <!-- ... -->

    <mat-form-field>
        <mat-select placeholder="State">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
        </mat-select>
    </mat-form-field>

    <br />

    <!-- Please, alert it's value everytime it changes -->
    <mat-slide-toggle>Slide me!</mat-slide-toggle>

    <br />

    <mat-form-field>
        <input matInput [matDatepicker]="myDatepicker">
        <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
    </mat-form-field>

    <!-- ... -->

</body>

</html>

要求：

一切都必须在里面：index.html（没有兄弟文件）。
从某个CDN服务器引用所有需要的JavaScript文件。
直接在<mat-select />中使用组件/标签：{<mat-slide-toggle />，<mat-datepicker />，index.html}。
当您在浏览器中打开index.html时，您会获得与以下任一项相同的输出：
- 纯JavaScript live output和code。
- 纯TypeScript live output and code。
不要使用替换jQuery UI组件。

这背后的想法是获得与以下Angular1（不是Angular2）示例相同的结果。在index.html内部使用了Angular1组件：<sm-range-picker-input />。以下是此示例的live output和code，如您所见，它符合上述5个要求。

Answer 1

实际上，你不需要如此努力地存档这个。例如，随Angular CLI组件发布的最新Angular版本将为您完成所有这些工作。

幕后实际发生的是Angular CLI使用Webpack bundler 1.将所有TS文件编译为JS文件2.打包，压缩，分成块JS文件等等等等..所有这些进程的输出都是bundle文件。通常它命名为main.js或类似。这个纯Javascript文件包含您需要使用的所有（在您的示例中）标签，例如mat-select，mat-slide等。它已经存在的要点 - 你不要不需要从CDN或其他任何东西带来Angular - 它已经包装在main.js内。

一般建议：

详细了解Angular如何与捆绑商合作：Angular Deployment
详细了解Webpack的工作原理：Webpack concepts，尤其是：HtmlWebpackPlugin

注意：您可以带来全局CSS样式（例如）并将其放入<head>部分甚至其他JS包中。 Angular中有一种方法可以在应用程序中使用它，尽管它们在外部定义

使用纯JavaScript呈现这些Angular2组件

1 个答案: