我有这个 Angular 项目:

$ mkdir angular-material-select
$ cd angular-material-select
$ git clone git@github.com:napolev/angular-material-select.git .
$ npm install
$ ng serve

它使用了来自 Material Design<mat-select /> .

原始示例:https://material.angular.io/components/select/overview#resetting-the-select-value

隔离示例:https://stackblitz.com/angular/qodvbqymxae

我的目标是使用组件: <mat-select /> 与普通 Javascript ,而无需与 ng 一起服务: ng serve . 我想用以下方式使用它:

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8" />

<!-- BEGIN of {Angular, Material Design, etc.} dependencies -->
<link rel="stylesheet" type="text/css" href="..." />
<script type="text/javascript" src="..."></script>
<!-- END of {Angular, Material Design, etc.} dependencies -->

<script type="text/javascript">
// BEGIN OF Angular BLOCK
// ...
// ... (if necessary)
// ...
// END OF Angular BLOCK
</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>

    <!-- ... -->

</body>

</html>

我想要类似于这个工作示例的东西( Angular 1 ):

实时代码:https://napolev.github.io/angular-material-select/datepicker.html

源代码:https://raw.githubusercontent.com/napolev/angular-material-select/master/datepicker.html