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

2023年3月21日 240次阅读

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

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

并在ParentComponent.html文字类中将其作为输入值传递给它：

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

然后选项的类型不再是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;
  ...
}

>有没有更好或内置的方法来做到这一点？
>如果没有,那么我如何将匿名对象转换为Foo？

最佳答案 在某些时候,如果要使用所描述的两种方法之一来使用类方法,则需要使用new创建类Foo的实例.如果要将普通对象作为@Input传入,则输入不能是(类) – 类型Foo,因为它不是该类的实例.在类中,您需要调用new Foo(fooInput)然后调用e. G.将新创建的实例分配给另一个成员变量.

在我看来,将数据放在普通数据对象而不是类中会更好：将Foo定义为接口而不是类型安全类.然后,将类中的方法放入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}`;
  }
}
点赞