Question

我有一个类型为@Input的{{1}}属性的组件：

Foo

在@Component({ ... }) export class MyComponent { @Input() Options: Foo; ... }文字类中，将其作为输入值传递给它：

ParentComponent.html

然后<My [Options]="{prop1:true, prop2:false, prop3:1, ... }"></My>的类型不再是Options。它更改为匿名对象，因此Foo的方法不再可用。
防止这种情况的一种方法是在Foo中创建Foo的实例并将其作为变量传递：

ParentComponent .ts

在@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; ... }？

Answer 1

如果要使用所描述的两种方法之一使用类方法，则有时需要使用Foo创建类new的实例。如果要将普通对象作为@Input传递，则输入不能是{class-} type Foo，因为它不是该类的实例。在该类中，您需要先调用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}`;
  }
}

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

1 个答案:

示例