Angular 2和香草Javascript-将数据从HTML传递到输入_Javascript_Angular

Angular 2和香草Javascript-将数据从HTML传递到输入

javascript angular

Angular 2和香草Javascript-将数据从HTML传递到输入,javascript,angular,Javascript,Angular,我正在尝试使用Angular 2和vanilla Javascript编写一个组件，我希望在常规HTML页面上使用该组件，并且我希望能够将数据传递到该组件以对其进行自定义这就是我到目前为止所做的： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

我正在尝试使用Angular 2和vanilla Javascript编写一个组件，我希望在常规HTML页面上使用该组件，并且我希望能够将数据传递到该组件以对其进行自定义

这就是我到目前为止所做的：

index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">    
    </head>

    <body>

        <!-- I'm using the component here -->
        <process-code id="processId" name="processName"></process-code>

        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
        <script src="node_modules/@angular/core/core.umd.js"></script>
        <script src="node_modules/@angular/common/common.umd.js"></script>
        <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
        <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
        <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

        <!-- I'm including the component here -->
        <script src="process-code.js"></script>

    </body>

</html>

<label>Process</label>
<input [id]="id" [name]="name" [(ngModel)]="codigoProcesso">

过程代码.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">    
    </head>

    <body>

        <!-- I'm using the component here -->
        <process-code id="processId" name="processName"></process-code>

        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
        <script src="node_modules/@angular/core/core.umd.js"></script>
        <script src="node_modules/@angular/common/common.umd.js"></script>
        <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
        <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
        <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

        <!-- I'm including the component here -->
        <script src="process-code.js"></script>

    </body>

</html>

<label>Process</label>
<input [id]="id" [name]="name" [(ngModel)]="codigoProcesso">

过程

以下是组件的渲染方式：

<process-code id="processId" name="processName"><label>Process</label>
    <input id="null" name="null" class="ng-untouched ng-pristine ng-valid">
</process-code>

过程

我希望

输入的id和name属性包含index.html页面上指定的值，但显然它们没有初始化
我想知道我错过了什么。
改变
<process-code id="processId" name="processName"><label>Process</label>
    <input id="null" name="null" class="ng-untouched ng-pristine ng-valid">
</process-code>

过程

到


id
和name
应该是父组件的本地变量。
仅供参考，为什么不使用Angular CLI和javascript而不是Typescript？我正在处理遗留应用程序，我无法重构整个应用程序以将其转换为Angular应用程序，但我想在特定点使用角度分量。