logo标签列表

Angular 2与纯JavaScript - 从HTML向输入框传递数据

javascriptangular
3
我将使用Angular 2和纯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>

process-code.js

"use strict";

(function(){

    var ProcessCode = ng.core.Component({

        selector:'process-code',
        templateUrl: 'process-code.html',
        inputs: ['id', 'name']

    }).Class({

        constructor: function(){
            this.processCode = null;
            this.id = null;
            this.name = null;
        }

    })

    document.addEventListener('DOMContentLoaded', function() {
        ng.platformBrowserDynamic.bootstrap(ProcessCode);
    });

})();

process-code.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>

我原本希望input的id和name属性包含在index.html页面中指定的值，但显然它们没有被初始化。
我想知道我错过了什么。
2
只是想了解一下，您为什么不使用Angular-CLI和JavaScript而选择TypeScript呢？ - Jeremy Thille
1
我正在处理一个旧应用程序，无法将整个应用程序重构为 Angular 应用程序，但我想在特定点使用 Angular 组件。 - Jefferson Lima
1个回答
0

更改

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

转到

<process-code [id]="processId" [name]="processName">
</process-code>

id和name应该是父组件的局部变量。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接