將文字對象設置為組件的Input屬性作為已知對象類

Question

我有一個類型為Foo的@Input屬性的組件：

@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

如果要使用所描述的兩種方法之一使用類方法，則有時需要使用new創建類Foo的實例。 如果要將普通對象作為@Input ，則輸入不能為（class-）類型的Foo因為它不是該類的實例。 在該類中，您需要調用new Foo(fooInput) ，然后例如將新創建的實例分配給另一個成員變量。

我認為，最好將數據放在普通數據對象中而不是類中：為了類型安全，將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}`;
  }
}