Question

我正在努力如何重复使用注入不同数据的组件？

我有一个客户组件，其中包含与客户关联的数据和运输数据。我希望按钮批准客户和发货数据。

我有一个对话框组件，其中包含一个表单，用于注入客户数据。我正在努力如何重用该组件，但注入了运输数据。

我的客户组件html包含一个批准客户的按钮：

<button *ngIf="canCustomerServiceApprove && showSingleCustServiceApprove" mat-raised-button (click)="customerServiceApprove(customer)" color="primary">{{'customers.management.CustomerServiceApproval' | translate}}</button>

这会调用方法打开dialogcomponent：

 private customerServiceApprove(customer?: Customer) {
    this.sourceCustomer = customer;

    let dialogRef = this.dialog.open(CustomerServiceApprovalDialogComponent,
        {
            panelClass: 'mat-dialog-lg',
            data: { customer: customer }
        });

}

再往下我有一个带有自己按钮的发货清单，以批准发货：

<mat-cell *matCellDef="let shipping" fxFlex="140px">
   <button *ngIf="canCustomerServiceApprove" mat-icon-button matTooltip="{{'shippings.management.CustServApprove' | translate}}" (click)="CustServApproval(shipping)"><mat-icon>gavel</mat-icon>
   </button>
</mat-cell>

现在该按钮有一个单独的方法：

private CustServApproval(shipping?: Shipping) {
    this.sourceShipping = shipping;
    alert("should open the approvaldialog for shipping id: " + this.sourceShipping.id);

}

dialogcomponent获取客户注入但无法注入发货数据。我在shipData上收到错误，对我来说很正常，因为他只收到客户而不是送货。

export class CustomerServiceApprovalDialogComponent {
@ViewChild('form')
private form: NgForm;


constructor(
    public dialogRef: MatDialogRef<CustomerServiceApprovalDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { customer: Customer },
   // @Inject(MAT_DIALOG_DATA) public shipData: { shipping: Shipping },

dialogcomponent html文件包含带有保存按钮的表单。我想根据客户的要求显示标题，无论是在发货时，还是在保存客户ID时使用发货ID进行保存。

现在我有一个批准按钮，可以根据customerId

保存它

<button mat-raised-button (click)="save(1, data.customer.id )" color="primary">Approve</button>

所以我不知道如何根据接收到的数据取决于组件接收的数据和保存按钮，如下所示：

`<button *ngIf="if customer; then type=1 id=customerid else type=2 id=shippingid mat-raised-button (click)="save(type, id )" color="primary">Approve</button>`

我希望很清楚？

Answer 1

我在上一个项目中使用了pub / sub设计模式来获取某些组件。不确定这是否可以帮助你，因为它非常通用。但是，如果您只是创建，遵循并强制执行架构，那么您应该做得很好。作为一个注释，你可能基本上可以使用flux / redux / mobx模式做同样的事情

在Angular组件的ngInit（）生命周期方法中，您可以创建一个通用的订阅方法，如：

在构造函数中调用消息传递服务：

constructor(private appMessagingService: AppMessaging) { }

ngOnInit（）生命周期方法

 ngOnInit() {
 this.sub = this.appMessagingService.getComp1Message()
                         .takeWhile(() => this.alive) //alive is just a boolean variable
                         .subscribe(message => { 
                             this.message = message; 
  });
}

别忘了在ngDestroy（）方法中清理你的observable：

 ngOnDestroy() {
    this.sub.unsubscribe();
    this.alive = false;
}

拥有应用范围内的消息服务，其中包含基本的发送，获取和清除消息..

AppMessaging.service.ts：

sendComp1Message(message) {
    this.message.next(message);
}

getComp1Message(): Observable<any> {
    return this.message.asObservable();
}

clearComp1Message() {
    this.message.next();
}

向this家伙大声喊叫，他有一些很好的资源，并激励我使用这个简单的解决方案。简单就是关键IMO祝你好运！

如何重用注入不同数据的Angular组件？

1 个答案: