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 Y 인딩은 미세 출력 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]이 이상한 상태에 있습니다. 다음은 의미하는 바입니다. 생성자에서 두 개의 console.log 문을 살펴보십시오. 이제, 출력 :

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

  그래서, this.highlighted는 두 통화 사이 true에 undefined에서 가고, this.size 상관없이 undefined 남아 있지.

Answer 1

[...]을 사용하면 구성 요소의 속성을 기반으로 표현식을 평가하려고합니다.

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