'int' 成员在子组件中不作为 @Input() 工作

Question

在下面的代码中，int 成员 clicked_number 的值不会改变，而 Cint 成员 cint 的值会改变。

@Component(
  selector: 'my-app',
  template:
  '''
  <h3> Using int:</h3>
  <h4> Clicked Number:{{clicked_number}}</h4>
  <h3> Using Cint:</h3>
  <h4> Clicked Number:{{cint.i}}</h4>

  <div> Numbers: </div><div> <numbers [numbers]="numbers" [clicked_number]="clicked_number" [cint]="cint"></numbers> </div> 
  ''',
  directives: const [materialDirectives, NumbersComponent],
  providers: const [materialProviders],
)
class AppComponent {
  List<int> numbers = [ 1, 2, 3, 4, 5 ];
  int clicked_number = -1;
  Cint cint = new Cint( );
}

其中 Cint 只是一个带有 class 包装器的 int：

class Cint{ int i;  }

numbers 选择器的代码是：

@Component(
  selector: 'numbers',
  styles: const[ '''
  .numbers { float: left; height: 30px; width: 310px; }
  .number:hover { background-color: #F88;}
  .number {cursor: pointer; width: 30px; height: 30px; vertical-align:middle; text-align:center; line-height: 30px; float: left;}
   ''' ],
  template:'''
  <div class="numbers">
   <div *ngFor="let n of numbers" (click)="onClick(n)" class="number"> {{n}} </div>
  </div>
  ''',
  directives: const [CORE_DIRECTIVES,formDirectives],
)

class NumbersComponent {
  @Input()   List<int> numbers;
  @Input()   int clicked_number;
  @Input()   Cint cint;

  void onClick( int i_i ) {
    clicked_number = i_i;
    cint.i = i_i;
  }

虽然这对我来说不是一个交易障碍，但我非常想了解为什么我们不能像本例中的 Cint 那样使用 int。

我在 WebStorm 2017.2.3 中使用 Angular-Dart 4.0

Answer 1

这种行为不是Angular现象，而是Dart语言的现象。以下代码说明了纯 Dart 中的相同问题。

class Cint { int my_int; Cint( this.my_int ); }

void make_2 ( int i_i, Cint i_cint ) {
  i_i = 2;
  i_cint.my_int = 2;
}

void main() {
 int i = 1;
 Cint cint = new Cint( 1 );

  print( "int= $i, Cint= ${cint.my_int} \n");

  make_2( i, cint );

  print( "int= $i, Cint= ${cint.my_int} \n");

}

输出为：

int= 1, Cint=1
int= 1, Cint=2

对于 Dart 语言专家来说，解释这里发生的事情将很有教育意义。如果你碰巧认识这么聪明的人，请鼓励他们提供上述解释。

'int' 成员在子组件中不作为 @Input() 工作

'int' member does not work as @Input() in child component

webstorm

dart

angular-dart