Question

我尝试使用带有vanilla Javascript的Angular 2编写组件，我想在常规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>

过程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);
    });

})();

过程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 和名称属性包含 index.html 页面上指定的值，但显然他们没有被初始化。

我想知道我错过了什么。

Answer 1

更改

<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应该是父组件的局部变量。

Angular 2 with vanilla Javascript - 将数据传递到HTML输入

1 个答案: