Question

我正在创建（第一个！）AngularDart应用程序。我在List组件中有一个Procedure类procedure_list_component.dart的对象（根据示例ToDo应用程序的list组件建模）。显示在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>

我怎样才能@Input一个复杂的对象到我的AngularDart组件中？

1 个答案: