Angular-dart: 从属性自动转换Component的@input字段

Question

假设

<component list-attribute="a b c" bool-attribute></component>

什么是使组件状态像这样的最佳方式：

@Component(...
class Component{
  List<String> listAttribute; // Should automatically contain [a,b,c]
  bool boolAttribute; // Should automatically contain true

Answer 1

Angular 没有任何东西可以自动转换值。

这种绑定

 list-attribute="a b c"

将始终传递一个字符串。

可能的解决方案

首先属性需要注释

@Input()List<String> listAttribute;

显式传递列表

 [list-attribute]="['a', 'b', 'c']"

创建一个进行转换的 setter

List<String> _listAttribute
@Input() set listAttribute(String value) {
  _listAttribute = value?.split(' ');
}

和

list-attribute="a b c"

或

[list-attribute]="'a b c'"

或自定义管道进行拆分喜欢

[list-attribute]="a b c | split"

Angular-dart: 从属性自动转换Component的@input字段

Angular-dart: Automatic conversion of Component's @input fields from attributes

dart

angular-dart

可能的解决方案