角2輸入綁定不起作用

的index.html：角2輸入綁定不起作用

<app [myname]="some_name"></app>

app.component.ts：

import {Component, Input, Output} from '@angular/core'; 

    @Component({ 
    selector: 'app', 
    template: '<span>{{myname}}</span>' 
    }) 

    export class CupBuyComponent { 
     @Input() myname: String; 

     constructor(){ 
      console.log(this.myname); 
     } 
    }

JS控制檯說未定義。我如何從.html文件獲取變量以將其發送到組件？

來源

2016-09-21 Rattrap

因爲你還沒有定義'myname'價值，所以將是不確定的？正如你在'title'中提到的那樣，我在你的問題中沒有看到輸入 –

只是不要在根組件（'AppComponent'）上做它。 –

請閱讀我下面編輯的註釋，我解釋了爲什麼你的代碼即使在解決方案@yurzui和我提供的情況下也不起作用。 –

更新

爲什麼這不工作的原因是，您的index.html中您將不是一個角組件。因此，Angular不會編譯這個元素。而 Angular不會在運行時讀取屬性值，只有在編譯期間，否則我們會得到性能影響。

https://github.com/angular/angular/issues/1858#issuecomment-151326461

這會做你想要什麼：

的index.html

<app myname="some_name"></app>

根組件

export class CupBuyComponent { 
    @Input() myname: String; 

    constructor(elm: ElementRef){ 
    this.myname = elm.nativeElement.getAttribute('myname'); 
    } 
}

另外如果你想傳遞數據的對象，你可以在這個問題

Passing server parameters to ngModule after RC5 upgrade

原始

看看如果你想傳遞數據作爲文本那麼它應該是

<app [myname]="'some_name'"></app>

或

<app myname="some_name"></app>

來源

2016-09-21 10:56:04 yurzui

所有相同的未定義 – Rattrap

重要

我解釋下面有什麼不對您的約束力，但即使您使用我提供的代碼，因爲你試圖傳遞一個它不會工作輸入到你要引導的組件（根組件），這是不可能的。

如果你想傳遞的字符串some_name到myname輸入變量，你應該給它沒有[]：

<app myname="some_name"></app>

如果用[]像你這樣做，它會在一個名爲some_name變量您你沒有的組件，這就是你在控制檯中獲得undefined的原因。

來源

2016-09-21 10:58:48

其在此事件前後訪問：

ngOnInit() { ... here ... }

和其他人已經提到的..如果您使用的是[myname]="variable or expression()"語法，裏面的「」必須是一個變量或者一個表達式您的組件..

如果您使用此語法myname="anyStringHere"你可以只粘貼字符串有..

來源

2016-09-21 11:22:47 mxii

角2輸入綁定不起作用

回答

相關問題