javascript - 将文字对象设置为组件的 Input 属性作为已知对象类

Question

我有一个 @Input 属性类型为 Foo 的组件:

@Component({
  ...
})
export class MyComponent {
  @Input() Options: Foo;
  ...
}

然后在 ParentComponent.html 文字类中将其作为输入值传递给它:

<My [Options]="{prop1:true, prop2:false, prop3:1, ... }"></My>

Options 的类型不再是 Foo。它变为匿名对象，因此无法再访问 Foo 的方法。
防止这种情况的一种方法是在 ParentComponent .ts 中创建 Foo 的实例并将其作为变量传递:

@Component({
  ...
})
export class ParentComponent {
  Options: new Foo(true, true, 1, ...);
  ...
}

并在 ParentComponent.html 中使用:

<My [Foo]="options"></My>

另一种方法是以某种方式将匿名对象转换为新创建的 Foo 对象:

@Component({
  ...
})
export class MyComponent {
  @Input() set Options(value: Foo){
    //Somehow cast anonymous to Foo.
  }
  private options : Foo;
  ...
}

1. 有没有更好的或内置的方法来做到这一点？
2. 如果不是，那么如何将匿名对象转换为 Foo？

Answer 1

有时您需要创建类的实例 Foo与 new如果您想使用您描述的两种方式之一来使用类方法。如果您想将普通对象作为 @Input 传递，输入不能是(类)类型 Foo因为它不是该类的实例。在类(class)内，您需要调用 new Foo(fooInput)然后是e。 G。将新创建的实例分配给另一个成员变量。

在我看来，将数据放在普通数据对象中而不是类中会更好:定义 Foo作为interface而不是 class为了类型安全。然后，放入 class 中的方法进入FooService , 它操纵 Foo对象。有了这个，您就不必为类实例化而烦恼了。

例子

class User {
  constructor(public firstName: string, public lastName: string) {}

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  } 
}

变成:

interface User {
  firstName: string;
  lastName: string;
}

class UserService {
  getFullName(user: User): string {
    return `${user.firstName} ${user.lastName}`;
  }
}