Как повторно использовать компонент Angular, вводящий разные данные?

Я изо всех сил пытаюсь повторно использовать компонент с вводом разных данных?

У меня есть клиентский компонент, содержащий его данные и данные о доставке, связанные с клиентом. Я хочу, чтобы кнопки одобряли клиента и данные о доставке.

У меня есть диалоговый компонент с формой, в которую я ввожу данные клиента. Я борюсь с тем, как я могу повторно использовать этот компонент, но добавляю данные о доставке.

HTML-код компонента моего клиента содержит кнопку для утверждения клиента:

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

Это вызывает метод для открытия диалогового компонента:

 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 },

HTML-файл диалогового компонента содержит форму с кнопкой сохранения. Я хотел бы показать заголовок в зависимости либо от клиента, либо от доставки, либо при сохранении либо сохранения с идентификатором клиента, либо с идентификатором доставки.

На данный момент у меня есть кнопка утверждения, которая сохраняет ее на основе идентификатора клиента:

<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>`

надеюсь понятно?


angular inject
person alve    schedule 03.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В моем последнем проекте для некоторых компонентов я использовал шаблон проектирования pub/sub. Не уверен, что это может помочь вам, так как это очень общее. Но если вы просто создаете архитектуру, следуете ей и применяете ее, то у вас все должно получиться. В качестве примечания, вы могли бы сделать то же самое, возможно, с шаблоном flux/redux/mobx.

В методе жизненного цикла ngInit() компонента Angular вы можете создать общий метод подписки, например:

Вызовите службу обмена сообщениями в своем конструкторе:

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():

 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();
}

Большое спасибо этот парень, у него есть отличные ресурсы, и он вдохновил меня на использование этого простого решения. Простота - это ключ к успеху!

person BSchnitzel    schedule 03.04.2018