我正在尝试使用 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>
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 页面上指定的值，但显然它们没有被初始化。
我想知道我错过了什么。
最佳答案
改变
<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 应该是父组件的局部变量。
关于javascript - Angular 2 with vanilla Javascript - 将数据从 HTML 传递到输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45305635/