將值傳遞到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組件

回答

相關問題