Question

我有一个笨拙的角度分量，它从其父级获取@input。当前，此组件具有4个输入属性，我需要再添加一个。

应该添加第5个输入属性，还是创建一个配置对象并以@input身份传递。最佳做法是什么？

Answer 1

一个选择是将状态放入Service中，并使用它来更新组件。服务是从应用程序其他部分提取逻辑并将其放置在中心位置的一种好方法。因此，无需使用输入，只需在组件中声明变量，然后每当需要将数据传递给组件时，只需在服务中调用发出输入的方法（在服务中负责其状态）中调用方法即可。你需要。在组件的构造函数中，将其作为私有参数传递（私有部分非常重要）。从angular / core实现OnInit并订阅该方法，在订阅中，您使用函数来更新变量。如果您发现自己在其他地方使用输入，则可能要创建一个数据对象，并且传递一个对象比传递多个变量要容易得多。

组件伪代码：

@Component(... some stuff here ...)
export class YourComponent implements OnInit{ //don't forget to import OnInit
vars: varTypes;

constructor(private yourComponentService YourComponentService) {}
ngOnInit(){
    this.yourComponentService.getVars.subscribe((vars)=>this.vars = vars);
}

服务伪代码：

@Injectable({ 
    providedIn: 'root'
})
export class YourComponentService {
  gettingVars = new EventEmitter<varTypes>();
  private vars: varTypes = x;

  public getVars() {
    this.gettingVars.emit(vars);
  }

  public setVars(vars: varTypes) {
     this.vars = vars;
     getVars();
  }
}

Answer 2

这取决于您的数据是什么以及如何关联。这几乎不是一个角度问题，而是关于数据建模的问题。

通常，将有意义的数据分组在一起。

例如，如果您的孩子需要某个人import { Component, OnInit } from '@angular/core'; import { Product } from 'src/app/models/product'; @Component({ selector: 'app-tool-card', templateUrl: './tool-card.component.html', styleUrls: ['./tool-card.component.css'] }) export class ToolCardComponent implements OnInit { public activeProduct: any; public inputNum: number; public totalCost: number = 0; public btnEnabled = true; products: Product[] = [ new Product('Hammer', 'Hammer', 'Item used to hammer things', 'https://upload.wikimedia.org/wikipedia/commons/8/84/Claw-hammer.jpg', 1), new Product('Saw', 'Hammer', 'I just saw a guy saying the n-word', 'https://media.screwfix.com/is/image//ae235?src=ae235/32045_P&$prodImageMedium$', 2), // new Product('Hit or miss', 'Hit or miss', 'I guess they never miss huh, mwah', 'https://pbs.twimg.com/media/Ds5mk0RU0AA1z_l.jpg', 5), // new Product('Partyrocking', 'Party rock', 'Sorry for partyrockingggggg', 'https://timedotcom.files.wordpress.com/2014/11/redfoo-literally-cant.jpg', 2), new Product('Saw', 'Hammer', 'This item is used to hammer things', 'https://media.screwfix.com/is/image//ae235?src=ae235/32045_P&$prodImageMedium$', 2), new Product('Screwdriver', 'Screwdriver', 'This item is used to screw', 'https://media.screwfix.com/is/image//ae235?src=ae235/32045_P&$prodImageMedium$', 2), new Product('Saw', 'Hammer', 'I just saw a guy saying the n-word', 'https://media.screwfix.com/is/image//ae235?src=ae235/32045_P&$prodImageMedium$', 2), ]; constructor(){ } ngDoCheck(){ if (this.inputNum > 0){ this.btnEnabled = false; } else{ this.btnEnabled = true; } } ngOnInit() {} public calculateTotal(): number { return this.totalCost = this.activeProduct.inputNum * this.activeProduct.price; } public openModal(product): void{ // Copying object reference so we dont modify the original this.activeProduct = Object.assign({}, product); this.totalCost = 0; this.inputNum = 0; } }，那么发送4个firstName, lastName, address, age就没有意义了。您宁愿使用这4个属性来创建新类型@Input，然后将整个Person作为单个Person发送。

现在，如果相同的组件需要@Input，那么将totalNumberOfPersons打包成int类型并没有太大意义，但是您可以将其作为单独的{{ 1}};因此您最终会得到2个Person：

@Input

Answer 3

只需添加它并完成它。 5个输入属性不是很多。

从很多输入属性到单个输入配置对象的角度分量重构

3 个答案: