ng2組件屬性混淆

我遇到了一個難題讓Angular 2組件在Angular 1應用程序中工作。我成功地使用ngUpgrade引導應用程序，並且我的組件按預期顯示，但是綁定有一些不可思議的地方。ng2組件屬性混淆

這裏的作爲內另一角1個指令中使用的部件的表示：

<stdbutton name="name-{{someId}}" 
      (click)="doSomething()" 
      [highlighted]="true" 
      [size]="small">Clicky</stdbutton>

[highlighted]和[size]都旨在被用作元件上的可選屬性。

正如你所看到的，我同時使用ng1和ng2風格的綁定。 ng1綁定工作正常 - 輸出HTML將有name="name-12345"。古怪是在NG2綁定：

(click)不執行事件處理程序
[highlighted]是一個奇怪的狀態
[size]永遠是不確定的

這裏的組件定義：

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

@Component({ 
    selector: 'stdbutton', 
    inputs: ['size', 'highlighted'], 
    template: ` 
     <div [class]="buttonClass" 
      [ngClass]="{stdbuttonhighlighted: highlighted}"> 
      <ng-content></ng-content> 
     </div> 
     ` 
}) 
export class StdButtonComponent { 
    @Input() size: any; 
    @Input() highlighted: boolean; 

    buttonClass: string; 

    constructor() { 
     this.buttonClass = 'stdbutton' + (this.size ? this.size : ''); 
     console.log(this.highlighted); 
     console.log(this); 
    } 
}

當我說[highlighted]處於一個奇怪的狀態，這就是我的意思。看看構造函數中的兩個console.log語句。現在，輸出：

stdbutton.component.ts:21 undefined 

stdbutton.component.ts:22 
StdButtonComponent {buttonClass: "stdbutton"} 
    buttonClass: "stdbutton" 
    highlighted: true 
    size: undefined

所以，從this.highlighted到undefined那張true在兩個電話之間，以及this.size仍然undefined不管。

來源

2016-06-13 Stuart Updegrave

看到這個問題http://stackoverflow.com/questions/33561845/angular2-cannot-訪問輸入從我的控制器構造函數 – yurzui

當您使用[...]時，您將嘗試根據組件的屬性評估表達式。如果你要設置的字符串「值」您可以使用：

[size]="'small'"
size="small"

來源

2016-06-13 16:08:41

好吧，這讓我超過了第一個障礙。謝謝。但是，我仍然對'this.size'感到困惑，它看似短暫的狀態。構造函數（）{ this.buttonClass ='stdbutton'+（this.size ||''）; console.log（this）; console.log（this.size）; } 當我進入瀏覽器控制檯並展開StdButtonComponent時，它的'size'屬性將會變爲''small''。第二個console.log將顯示'undefined'。 –

ng2組件屬性混淆

回答

相關問題