将值传递给Angular 2组件的问题[重复]
Posted
技术标签:
【中文标题】将值传递给Angular 2组件的问题[重复]【英文标题】：Issue passing value into Angular 2 component [duplicate] 【发布时间】：2016-09-06 02:04:20 【问题描述】：我正在尝试将一个简单的字符串传递给 angular 2 组件。对于我的生活，我找不到问题。我将值作为来自 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>
当我单击加号按钮吐出值时，我得到的都是未定义的。 任何帮助都会很棒！
【问题讨论】：
【参考方案1】：我不确定您是否可以通过 index.html 执行此操作
通常要使用组件（或指令），您需要将它们指定为带有@Component 或@Directive 装饰器的指令。
我应该从 QuickStart 的标准 AppComponent 方法开始，并在 AppComponent 中使用 Accordian。
我希望这会有所帮助。
【讨论】：
我想你可以。我见过一些将硬编码字符串传递给组件的例子。我希望可以从 index.html 做同样的事情 你绝对可以传递硬编码的字符串，关键是你是否可以从 index.html 中将任何输入传递给组件/指令【参考方案2】：这里是工作的链接 plunker code
Index.html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
main.ts
import bootstrap from '@angular/platform-browser-dynamic';
import App from './app';
bootstrap(App, [])
.catch(err => console.error(err));
app.ts
import Component from '@angular/core';
import Accordian from './accordian';
@Component(
selector: 'my-app',
providers: [],
template: `
<div>
<accordian [inputField]='"string"'></accordian>
</div>
`,
directives: [Accordian]
)
export class App
constructor()
this.name = 'Angular2 (Release Candidate!)'
accordian.ts
import Component, Input from '@angular/core'
@Component(
selector: 'accordian',
providers: [],
template: `
<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>
`,
directives: []
)
export class Accordian
@Input() inputField: string;
expanded = true;
expandToggle()
console.log(this.inputField)
this.expanded = !this.expanded;
【讨论】：
【参考方案3】：Angular 不会从 index.html 仅从其他组件中进行任何绑定。
在根组件中获取属性值的解决方法是
export class AppComponent
constructor(elementRef:ElementRef)
console.log(elementRef.nativeElement.getAttribute('inputField));
另见https://github.com/angular/angular/issues/1858
【讨论】：
以上是关于将值传递给Angular 2组件的问题[重复]的主要内容，如果未能解决你的问题，请参考以下文章