Angular 6和打字稿在组件中导入具有属性的类

Posted 2023-02-23

【中文标题】Angular 6和打字稿在组件中导入具有属性的类

【英文标题】：Angular 6 and typescript import a class with properties in component

【发布时间】：2019-08-28 10:35:33

【问题描述】：

我有一个ProductButton.ts 课程

export class ProductButton

    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;

我正在尝试将其导入我的组件并创建它的新实例。 但我似乎无法为其创建新实例。

这是我的组件类

import  ProductButton  from '../../models/ProductButton';

@Component(
    templateUrl: './product-edit.component.html',
    providers: []
)
export class ProductEditComponent implements OnInit 

    constructor()

    addChildTask()
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton = new ProductButton();
        pButton.ButtonText = "";
        this.product.ProductButtons.push(pButton);
    

为什么我尝试新建ProductButton 的实例我得到一个没有属性的空对象。每次点击该方法时如何创建一个新实例？

【问题讨论】：

您不提供任何这些属性，没有构造函数来初始化它们，并且类型仅在编译时存在。你期望的输出是什么？

@jonrsharpe 你说得对，我对 TS 不是很熟悉。我没有想到像 JS 类一样初始化它。我在网上看不到很多例子。

【参考方案1】：

当你的 ProductButton.ts 被编译时，你会在 vanilla javascript 中得到类似的东西。

// Without any properties
var ProductButton = /** @class */ (function () 
    function ProductButton() 
    
    return ProductButton;
());

要回答您的问题，您需要初始化类中的每个属性。

ProductButton.ts

export class ProductButton 
    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;
    constructor() 

        // Init properties as empty strings
        this.ProductBtnID = "";
        this.ParentWfTaskID = "";
        this.WfTaskID = "";
        this.TaskName = "";
        this.ButtonText = "";
        this.ProductID = ""

        // Init as O becuase type number
        this.ImageContentID = 0
    

但是，如果您只是想验证类/对象的属性，我建议您使用打字稿interface。接口描述了类的公共方面。

ProductButton.ts

export interface ProductButton 
    ProductBtnID: string;
    ProductID: string;
    ParentWfTaskID: string;
    WfTaskID: string;
    TaskName: string;
    ButtonText: string;
    ImageContentID: number;

ProductEditComponent.ts

import  ProductButton  from '../../models/ProductButton';

@Component(
    templateUrl: './product-edit.component.html',
    providers: []
)
export class ProductEditComponent implements OnInit 

    constructor()

    addChildTask()
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton: ProductButton = 
            ProductBtnID: "942u52r",
            ProductID: "AAA12",
            ParentWfTaskID: "ww12223",
            WfTaskID: "242122",
            TaskName: "My Favorite Task",
            ButtonText: "Complete your favorite task!!!",
            ImageContentID: 234212342,
        

        this.product.ProductButtons.push(pButton);
    

【讨论】：

谢谢，根据@jons 的评论，这就是我所做的。

【参考方案2】：

你应该为你的ProductButton.ts写一个构造函数

constructor(productBtn: any) 
  this.ProductBtnID = productBtn.ProductBtnID;
  this.ProductID = productBtn.ProductID;
  // ... rest of the properties.

然后在您的组件中，您可以创建上述类的对象，例如：

let prBtn = new ProductButton(obj)

其中obj 是包含属性的对象。