ng2コンポーネントの属性混乱

Question

Angular 1アプリでAngular 2コンポーネントを動作させるのに苦労しています。私は正常にngUpgradeを使用してアプリケーションをブートストラップしている、と私のコンポーネントが期待どおりに表示されますが、バインディングで起こっているいくつかの奇妙なことがあります。

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

[highlighted]と[size]の両方の要素に任意の属性として使用されることが意図される：

ここで別の角度指令1の内部で使用される成分の表現です。

ご覧のとおり、ng1とng2の両方のスタイルバインディングを使用しています。 ng1バインディングは、細かい出力のHTMLがname="name-12345"になります。ここで

は、コンポーネント定義です

[highlighted]は奇妙な状態

[size]にあるイベントハンドラを実行しません

• (click)常に未定義です：：すごみはNG2バインディングである

  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]は奇妙な状態にありますコンストラクタの2つのconsole.log文を見てください。さて、出力は：

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

  ので、this.highlightedは2回の呼び出しの間にtrueにundefinedから移行し、this.sizeはどんなundefined残っていません。

Answer 1

[...]を使用すると、コンポーネントのプロパティに基づいて式を評価しようとします。

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