Question

我正在尝试与多个组件共享模型。

在我的组件中：

public myModel: MyModel;

这是我的表单视图，其中包含多个组件：

<div class="panel-body">
    <div id="accordion">
      <app-details-1 [myModel]="myModel"></app-details-1>
      <app-details-2 [myModel]="myModel"></app-details-2>
      <app-details-3 [myModel]="myModel"></app-details-3>

在组件中，我会执行以下操作：

@Input() myModel: MyModel;

在组件的表单中，我想将输入绑定到myModel：

<label class="radio-inline">
   <input type="radio" name="someRadioButton" [(ngModel)]="myModel.someValue"> Yes
</label>

但是，在加载页面时，由于myModel为空，我得到了解析错误。基于模型，我的组件中也有一些依赖项：

this.itemSubscription = this.someService.get(this.myModel.id).subscribe(item => {
      this.item = item
    });

这也失败了，因为myModel为空...

这些是错误：

ERROR TypeError: Cannot read property 'id' of undefined

然后调用我的API

GET https://myApiUrl/api/item/undefined <--- this is the id from myModel

我在做什么错了？

Answer 1

我认为您的问题是myModel未被实例化，因此当您尝试访问其属性之一时，它会失败，因为它是未定义的。

在打字稿中，您可以使用此语法

public myModel: MyModel;

定义变量的类型，在这种情况下，myModel变量的类型为MyModel。因此，该指令只是一条声明，您要说的是myModel名称引用了特定的内存地址。

然后要创建类型为MyModel的变量，您需要使用new MyModel()对其进行实例化。

因此，扩展打字稿语法是

public myModel: MyModel = new MyModel();

这等于：

myModel是类型MyModel
myModel是一个公共变量
将MyModel的新实例分配给myModel变量

现在，当您在类型声明的同一行中创建实例时，可以省略最后一件事，让编译器可以推断对象类型。所以写

public myModel = new MyModel();

是一种简写形式，可导致

public myModel: MyModel = new MyModel();

在多个组件中共享模型

1 个答案: