将值传递到Angular 2组件

我试图将简单的字符串传递到角度2组件。对我而言，我找不到问题。我从index.html的将值传递到Angular 2组件

<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>

我得到的是不确定的传递值作为硬编码值的组件上，当我点击加上按钮来吐出价值。任何帮助将是太棒了！

来源

2016-05-10 Austin Lovell

角没有做任何来自index.html只能从其他组件中结合。

一种解决方法，以获得在根组件属性值是

export class AppComponent { 
    constructor(elementRef:ElementRef) { 
    console.log(elementRef.nativeElement.getAttribute('inputField)); 
    } 
}

又见https://github.com/angular/angular/issues/1858

来源

2016-05-11 04:17:13

我不知道你可以从index.html

通常这样做是为了使用组件（或指令），你需要将其指定为与@Component或@Directive装饰指令。

我应该从QuickStart的标准AppComponent方法开始，并在AppComponent中使用Accordian。

我希望这会有所帮助。

来源

2016-05-10 22:03:51 Picci

我认为你可以。我已经看到一些将硬编码字符串传递给组件的例子。我希望可以从index.html –

做同样的事情，你可以通过硬编码的字符串，问题是如果你可以从index.html中传递任何输入到组件/指令 – Picci

这里是链接到工作 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; 
    } 

}

来源

2016-05-11 03:18:31 Som

将值传递到Angular 2组件

回答

相关问题