dart - 如何将复杂对象 @Input 放入我的 AngularDart 组件中？

Question

我正在创建一个(我的第一个!)AngularDart 应用程序。我在 procedure_list_component.dart 组件中有一个 List 类 Procedure 的对象(模仿示例 ToDo 应用程序的列表组件)。这显示在 MaterialListComponent 中，一切正常。

我正在使用 Dart SDK 2.1.0 和 AngularDart ^5.2.0。

现在我想开发一个新组件来显示所选 Procedure 的详细信息。选择部分工作正常。我的细节组件目前看起来像这样:

@Component(
  selector: 'procedure-item',
  templateUrl: '''
<div>
  {{procedure.packageName}}.{{procedure.name}}
</div>
''',
  directives: [
  ],
)
class ProcedureItemComponent {
  @Input()
  Procedure procedure;
}

组件的用法如下所示:

<div *ngIf="selectedProcedure != null">
    <procedure-item procedure="{{selectedProcedure}}"></procedure-item>
</div>

但是，在运行时我收到错误:

EXCEPTION: Type 'String' is not a subtype of expected type 'Procedure'.
STACKTRACE: 
dart:sdk_internal 4000:19                                                         check_C
package:tadpole/src/procedure_list/procedure_list_component.template.dart 345:44  detectChangesInternal
package:angular/src/core/linker/app_view.dart 404:7                               detectCrash
package:angular/src/core/linker/app_view.dart 381:7                               detectChanges
package:angular/src/core/linker/view_container.dart 64:21                         detectChangesInNestedViews
package:tadpole/src/procedure_list/procedure_list_component.template.dart 136:13  detectChangesInternal
package:angular/src/core/linker/app_view.dart 404:7                               detectCrash
package:angular/src/core/linker/app_view.dart 381:7                               detectChanges
....many more lines

这个错误让我怀疑不支持在组件之间传递复杂对象，或者传递它们有一些神奇的语法。

我试过只使用 "selectedProcedure" 和 {{selectedProcedure}} 会导致编译器错误。这让我觉得在这种情况下支持复杂的对象。

是的，我的困惑是真实的。

查看文档，我找不到任何关于这是否可能的提及。我能找到的每个示例都只是发送 String，但从未具体说明仅支持 String。

真的不支持吗？如果是，我做错了什么？

Answer 1

要将输入传递给组件，您只需要在输入名称周围使用方括号。如果您将它们关闭，Angular 会尝试将输入设置为字符串，这不起作用，因为它被定义为采用 Procedure。

<div *ngIf="selectedProcedure != null">
    <procedure-item [procedure]="selectedProcedure"></procedure-item>
</div>