我如何@Input 一个复杂的对象到我的 AngularDart 组件中？

Question

我正在创建一个（我的第一个！）AngularDart 应用程序。我在一个组件中有List一个类的对象（以示例 ToDo 应用程序的列表组件为模型）。这显示在 a 中，并且一切正常。Procedureprocedure_list_component.dartMaterialListComponent

我使用的是 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;
}

组件的用法如下所示：

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

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

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

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

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

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

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

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

Answer 1

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

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