将值传递给Angular 2组件 [英] Issue passing value into Angular 2 component
本文介绍了将值传递给Angular 2组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将简单的字符串传递给有角度的2分量.对于我一生，我找不到问题.我正在通过index.html
I am trying to pass a simple string into an angular 2 component. For the life of me I can't find the issue. I am passing the value in as a hardcoded value on the component from index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-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/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<accordian [inputField]="'string'">Loading...</accordian>
</body>
</html>
组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'accordian',
templateUrl: 'app/accordian.html',
styleUrls: ['app/accordian.css']
})
export class Accordian {
@Input() inputField;
expanded = true;
expandToggle(){
console.log(this.inputField)
this.expanded = !this.expanded;
}
}
模板
<header (click)="expandToggle($event)">
<h4>Select an Activity!!!</h4>
<button>{{expanded ? '-' : '+'}}</button>
</header>
<ul *ngIf="expanded">
<li>
<h5>{{inputField}}</h5>
<a href="#">Update Personal Information</a>
</li>
<li>
<h5>User Tools</h5>
<a href="#">Update Personal Information</a>
</li>
<li>
<h5>User Tools</h5>
<a href="#">Update Personal Information</a>
</li>
</ul>
当我单击加号按钮吐出值时，我得到的所有内容都是不确定的. 任何帮助都太棒了！
All I get is undefined when I click on the plus button to spit out the value. Any help would be fantastic!
推荐答案
Angular仅从其他组件内部不对index.html进行任何绑定.
Angular doesn't do any binding from index.html only from within other components.
一种在根组件中获取属性值的解决方法是
A workaround to get attribute values in the root component is
export class AppComponent {
constructor(elementRef:ElementRef) {
console.log(elementRef.nativeElement.getAttribute('inputField));
}
}
另请参见 https://github.com/angular/angular/issues/1858
这篇关于将值传递给Angular 2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
