在以下代码中,
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
只是一个带有类包装器的 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;
}
虽然这对我来说不是一个交易障碍,但我非常想了解为什么我们不能像在这个例子中使用
int
那样使用 Cint
。
我在 WebStorm 2017.2.3 中使用 Angular-Dart 4.0
这种行为不是 Angular 现象,而是 Dart 语言现象。以下代码说明了纯 Dart 中的相同问题。
class Cint { int my_int; Cint( this.my_int ); }
void make_2 ( int i_i, Cint i_cinta, Cint i_cintb ) {
i_i = 2;
i_cinta.my_int = 2;
i_cintb = new Cint(2);
}
void main() {
int i = 1;
Cint cinta = new Cint( 1 );
Cint cintb = new Cint( 1 );
print( "int= $i, Cinta= ${cinta.my_int}, Cintb= ${cintb.my_int} ");
make_2( i, cinta, cintb );
print( "int= $i, Cinta= ${cinta.my_int}, Cintb= ${cintb.my_int} ");
}
输出为:
int= 1, Cinta=1, Cintb=1
int= 1, Cinta=2, Cintb=1
对于 Dart 语言专家来说,解释这里发生的事情是非常有教育意义的。如果你碰巧认识这么聪明的人,请鼓励他们提供上述解释。
感谢@KevinMoore提供的
Cintb
示例。