时间戳

首页 > 解决方案 > 如何引用 templateurl 中使用的类？

angular - 如何引用 templateurl 中使用的类？

问题描述

我在一个项目中使用角度，我有一个组件，它是一个由多个输入组成的表单。我已经在它们自己独特的组件中分别实现了这些输入，并且在每个组件中都有一个返回用户给出的数据的函数。它看起来像这样：

  <mat-card>
    <app-phone></app-phone>
  </mat-card>
  <mat-card>
    <app-address></app-address>
  </mat-card>
  <mat-card>
    <app-city></app-city>
  </mat-card>

我想在我的打字稿文件中使用这些类，以便通过它们的函数检索数据。我已经尝试在构造函数中包含这些类，但它没有用。这是制作通用组件的正确方法吗？如果是这样，我该怎么做？

标签： angulartypescriptweb

解决方案

您可以使用反应式表单方法来代替访问子组件方法：

formGroup在你的父类中创建一个说

父.ts

parentForm : FormGroup

然后将其作为 an 传递input给每个child组件。所以你必须创造

应用地址.ts, 应用电话.ts ....

@Input() formGroup : FormGroup

在每个子组件中。您还可以在每个子组件中创建另一个@Input formControlName : string，然后将各自form control name作为输入字符串component从父组件传递给每个子组件。有了这个，你可以在你的父组件本身中操作整个form，而不用担心子组件的方法。

<mat-card>
    <app-phone [formGroup]="parentForm" [formControlName]="'phone'"></app-phone>
  </mat-card>
  <mat-card>
    <app-address [formGroup]="parentForm" [formControlName]="'address'"></app-address>
</mat-card>

推荐阅读