如何将类成员变量传递给另一个组件角度？

Posted 2023-02-23

【中文标题】如何将类成员变量传递给另一个组件角度？

【英文标题】：How to pass a class member variable to another component angular?

【发布时间】：2021-09-20 18:58:09

【问题描述】：

car.ts 在“export class Car”中有“isNewCar”变量，我需要将“isNewCar”变量导出到另一个目录中的另一个组件 carSale.ts，而不是在同一个模块中。是否必须将 car.ts 模板添加到 carSale.ts 文件并添加“isNewCar”作为输入？

编辑：car.ts 具有导出类 Car isNewCar:boolean = false; 和 car.ts 是一个组件。 carSale.ts 也是一个组件，但它与 car.ts 不在同一个/共享模块中，我需要 carSale.ts，最终需要 carSale.ng.html 才能访问 isNewCar 变量。那么，您能告诉我如何使用 viewChild 装饰器或 carSale.ts 中的其他任何东西来访问该变量吗？理想情况下，我不想制作共享模块，但如果必须，我可以。

【参考方案1】：

您可以像这样扩展Car 类，

 export class CarSale extends Car 
    
    ngOnInit()
      this.isNewCar = true;
    
 

通过扩展Car 类，您将能够从CarSale 类访问isNewCar 属性

【参考方案2】：

需要有关用例的更多信息。 car.ts 是组件还是模型？ 如果 car.ts 是一个模型，您应该将它聚合到您的 carSale.ts 组件中，或者，如果确实需要，通过服务使其在全球范围内可用。 如果 car.ts 是具有自己模板的组件，那么您可以使用输出事件发射器或使用 viewChild 装饰器来访问该值。 还有其他共享变量的方法，但以上是更常见的。

汽车.ts：

/*
* This is a POJO
*/
export class Car
    isNew: boolean;

汽车销售.component.ts：

export class CarSale 

    car: Car; // Car is aggregate into CarSale

    ngOnInit()
        car = new Car();
        car.isNew = true;
    

汽车销售.component.html

<-- just use your car object like this --!>
<div *ngIf="car">Is the car new ?  car.isNew </div>

【讨论】：

car.ts 具有导出类 Car isNewCar:boolean = false; 和 car.ts 是一个组件。 carSale.ts 也是一个组件，但它与 car.ts 不在同一个/共享模块中，我需要 carSale.ts，最终需要 carSale.ng.html 才能访问 isNewCar 变量。那么，您能告诉我如何使用 viewChild 装饰器或 carSale.ts 中的其他任何东西来访问该变量吗？理想情况下，我不想制作共享模块，但如果必须，我可以。如果您需要更多说明，请告诉我。

首先，你的两个组件 car.ts 和 carSale.ts 是高度耦合的，必须集成到同一个模块中。其次，您的 car.ts 似乎是一个域模型，必须用作数据结构（其中没有任何方法）。最后，您的 carSale 声明您的汽车对象，然后您可以在 ts 和模板中使用它。

我刚刚编辑了我之前的帖子。希望这有帮助。享受角度的乐趣；）