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

Question

我正在创建一个（我的第一个！）AngularDart 应用程序。我在 procedure_list_component.dart 组件中有 List 个 class 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}}，这会导致编译器错误。这让我觉得在这种情况下支持复杂的对象。

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

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

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

Answer 1

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

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

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

How can I @Input a complex object into my AngularDart component?

dart

angular-dart