standing-orders-details页中,我不应该显示New Order按钮,unless我会浏览new-order 页.

img1

img2

1/第一步,我必须隐藏standing-orders-details页上的New Order 按钮

在ts中,我创建了一个如下变量:

isNewOrderVisited: boolean = false;

那么方法如下所示

goToNewOrder(): void {
    this.isNewOrderVisited = true;
    this.router.navigate(['/orders/newOrder']);
  }

在模板中,该按钮如下所示:

<button *ngIf="isNewOrderVisited" (click)="goToNewOrder()" class="btn btn-primary m-1" type="button">New Order</button>
             
             

现在,当我数到standing-orders-details的时候,New Order按钮被正确地隐藏了!

img3

img4

2/我的问题在这里!如果我从new-order开始创建订单,我会被重定向到standing-orders-details页面,但我应该看到New Order按钮!

我真的不知道该怎么做?

我想问题出在这里?

newOrderRequest(tokens: SignatureOtpModel | undefined): void {
    if (tokens) {
      this.service.createNewOrder(this.order!, tokens).pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          this.router.navigate(['/orders/standingOrdersDetails']);
        } else {
          this.router.navigate(['/orders/error/' + ConfirmOrderTypeEnum.Add + '/' + JSON.stringify(res.RETURNLIST)]);
        }
      });
    }
  }

我正在与你分享我的整个代码.

standing-orders-details.component.ts

export class StandingOrdersDetailsComponent implements OnInit {
  private unsubscribe$ = new Subject<void>();

  executedOrdersLines: OrderDetails[] = [];
  standingOrdersLines: OrderDetails[] = [];
  standingOrdersLinesAmounts: OrderDetails[] = [];
  step: number = 0;
  numPtf: number = 0;
  intitule: string = '';
  hasAccess$ = this.service.hasAccess$;
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;

  isNewOrderVisited: boolean = false;

  readonly allSense = SenseEnum;

  constructor(
    private service: StandingOrdersDetailsService,
    private modalService: BsModalService,
    private location: Location,
    private router: Router,

  ) { }

  ngOnInit(): void {
    this.currentPortfolio$.subscribe((portfolio: Portfolio) => {
      
      this.numPtf = portfolio.NUMEROPTF;
      this.intitule = portfolio.NAME;

    });
    this.getStandingOrders();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private getStandingOrders(): void {
    this.service.getStandingOrders().pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.standingOrdersLines = res.ORDDETAIL.filter(x => x.MONT_QTY === 2);
        this.standingOrdersLinesAmounts = res.ORDDETAIL.filter(x => x.MONT_QTY !== 2);
      }
    });
  }


  cancelStandingOrder(line: OrderDetails): void {
    this.modalService.show(CancelConfirmModalComponent, {
      initialState: {
        orderToCancel: line
      },
      providers: [
        { provide: StandingOrdersDetailsService }
      ]
    });
    this.step = 2;
  }
  
  goBack(): void {
    this.location.back();
  }

  goToNewOrder(): void {
    this.isNewOrderVisited = true;
    this.router.navigate(['/orders/newOrder']);
  }

  
}

new-order.component.ts

export class NewOrderComponent implements OnInit, OnDestroy {
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;
  private unsubscribe$ = new Subject<void>();
  private unsubscribeLoop$ = new Subject<void>();

  private isFromSimulation: boolean = false;

  readonly allSense = SenseEnum;
  readonly allInstrumentType = InstrumentTypeEnum;

  today: Date = new Date();
  maxDate?: Date;
  ptfSelectionner: number = 0;
  intitule: string = '';

  pageTitle: string = '';
  order?: Order;

  againsts: string[] = [];
  infosOrder: string[] = [];
  executionPlaces: { name: string, value: string }[] = [];

  instrumentType?: InstrumentTypeEnum;
  titaut?: Titaut;
  devise?: string;

  etats?: EtatStatus;
  statusList: AchVdnStatus[] = [];

  simulation?: Simulation;
  orderCheckMessages: ApiErrorResponse[] = [];
  value = 0;

  constructor(
    private service: NewOrderService,
    private location: Location,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private createDateTimePipe: CreateDateTimePipe,
  ) { }

  ngOnInit(): void {
    this.currentPortfolio$.subscribe((data: Portfolio) => {
      this.intitule = data.NAME;
      this.ptfSelectionner = data.NUMEROPTF;
      
    });
    
    const svm = this.activatedRoute.snapshot.paramMap.get('svm');
    if (!svm) {
      this.goBack();
      return;
    }

    this.maxDate = new Date(this.today.getFullYear() + 1, this.today.getMonth(), this.today.getDate());

    const validityDate = new Date(new Date().getFullYear(), 11, 31);
    this.order = new Order(+svm, validityDate);

    const from = this.activatedRoute.snapshot.paramMap.get('from');
    switch (from) {
      case 'simulation': this.updateOrderFromSimulation(); break;
      default: break;
    }

    this.getDetails();
  }

  private updateOrderFromSimulation(): void {
    this.isFromSimulation = true;

    const value = this.activatedRoute.snapshot.paramMap.get('data');
    if (value) {
      const data = JSON.parse(value);

      if (data.quantity) {
        this.order!.quantity = parseFloat(data.quantity);
      }
      if (data.limit) {
        this.order!.limit = parseFloat(data.limit);
      }
      if (data.sense) {
        this.order!.sense = data.sense;
      }
      if (data.against) {
        this.order!.against = data.against;
      }
    }
  }

  private getDetails(): void {
    this.service.getInstrumentInfo(this.order!.svm).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.pageTitle = res.ADVTITRE.BASIQUETITRE.LABEL + " (" + res.ADVTITRE.BASIQUETITRE.PLACELABEL + ")";
        this.devise = res.ADVTITRE.BASIQUETITRE.DEVISE;
        
        this.instrumentType = res.ADVTITRE.BASIQUETITRE.REGR;
        this.executionPlaces = [
          {
            name: 'Best Execution',
            value: 'Y'
          },
          {
            name: res.ADVTITRE.BASIQUETITRE.PLACELABEL,
            value: 'N'
          },
        ];

        concat(
          this.getOrderTICH(),
          this.getValuationAccounts(),
          // this.getInfoOrder(),
          this.getLastOpenDate()
        ).pipe(
          toArray(),
          takeUntil(this.unsubscribe$)
        ).subscribe(() => {
          this.loop();
        });
      }
    });
  }

  private getOrderTICH(): Observable<void> {
    return this.service.getOrderTICH(this.order!.svm).pipe(
      map(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          this.titaut = res.TITAUT;
        }
        return;
      }),
      takeUntil(this.unsubscribe$)
    );
  }



  private getValuationAccounts(): Observable<void> {
    return this.service.getValuationAccounts().pipe(
      map(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          if (res.PTF.ESPECES.length > 0) {
            const tmpAgainst = [...new Set(res.PTF.ESPECES.map(x => x.COMPTE.CURRENCY))];
            this.againsts = this.clearAgainsts(tmpAgainst);

            if (!this.isFromSimulation) {
              const index = this.againsts.findIndex(x => x === this.devise);
              if (index !== -1) {
                this.order!.against = this.againsts[index];
              }
            }
          }
        }
        return;
      }),
      takeUntil(this.unsubscribe$)
    );
  }

  private getLastOpenDate(): Observable<void> {
    return this.service.getLastOpenDate().pipe(
      map(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          this.order!.validityDate = this.createDateTimePipe.transform({ date: res.TEXTE.COURT, time: null });
        }
        return;
      }),
      takeUntil(this.unsubscribe$)
    );
  }

  private clearAgainsts(array: string[]): string[] {
    const indexEur = array.findIndex(x => x === 'EUR');
    if (indexEur !== -1 && indexEur > 0) {
      const tmp = array[indexEur];
      array.splice(indexEur, 1);
      array.unshift(tmp);
    }
    return array;
  }


  private loop(): void {
    timer(0, 10000).pipe(
      takeUntil(this.unsubscribeLoop$)
    ).subscribe();
  }


  ngOnDestroy(): void {
    this.resetSubscriptions(false);
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private resetSubscriptions(recreate: boolean = true): void {
    this.unsubscribeLoop$.next();
    this.unsubscribeLoop$.complete();
    if (recreate) {
      this.unsubscribeLoop$ = new Subject<void>();
    }
  }

  checkOrder(): void {
    this.resetSubscriptions();
    this.service.checkOrder(this.order!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.orderCheckMessages = res.RETURNLIST;
        this.newOrderSimulation();
      }
    });
  }

  private newOrderSimulation(): void {
    this.service.newOrderSimulation(this.order!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.simulation = res.SIMULATION;
      }
    });
  }

  newOrderRequest(tokens: SignatureOtpModel | undefined): void {
    if (tokens) {
      this.service.createNewOrder(this.order!, tokens).pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          this.router.navigate(['/orders/standingOrdersDetails']);
        } else {
          this.router.navigate(['/orders/error/' + ConfirmOrderTypeEnum.Add + '/' + JSON.stringify(res.RETURNLIST)]);
        }
      });
    }
  }

  goBack(): void {
    if (this.simulation) {
      this.simulation = undefined;
      this.resetSubscriptions();
      this.loop();
    } else {
      this.location.back();
    }
  }
}

我非常感谢你的帮助,因为我真的被困住了.

推荐答案

你可以给url传递一个参数.

app-routing.module.ts

  { path: 'standingOrderDetails', component: StandingOrdersDetailsComponent, data: {isNewOrderVisited: false}},  

然后,在您的StandingOrdersDetailsComponent.ts人中,访问如下参数:

isNewOrderVisited: boolean = false;

constructor(
    private route: ActivatedRoute,
  ) { }


ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.isNewOrderVisited = params['isNewOrderVisited']
    }
  );
}

url usage examples:

http://localhost:4200/orders/standingOrderDetails?isNewOrderVisited=false
http://localhost:4200/orders/standingOrderDetails?isNewOrderVisited=true

EDIT

    newOrderRequest(tokens: SignatureOtpModel | undefined): void {
        if (tokens) {
          this.service.createNewOrder(this.order!, tokens).pipe(
            takeUntil(this.unsubscribe$)
          ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              this.router.navigate(['/orders/standingOrdersDetails?isNewOrderVisited=false']);
            } else {
              this.router.navigate(['/orders/error/' + ConfirmOrderTypeEnum.Add + '/' + JSON.stringify(res.RETURNLIST)]);
            }
          });
        }
      }

Typescript相关问答推荐

返回对象的TypScript构造函数隐式地替换This的值来替换super(.)的任何调用者?

为什么在TypScript中写入typeof someArray[number]有效?

在React中实现具有独立页面的嵌套路径的最佳实践是什么?

当使用`type B = A`时,B的类型显示为A.为什么当`type B = A时显示为`any `|用A代替?

无法正确推断嵌套泛型?

对于合并对象中的可选属性(例如选项),类型推断可能是错误的

APIslice-CreateAPI的RTK打字错误

访问继承接口的属性时在html中出错.角形

ApexCharts条形图未显示最小值.负值

限制返回联合的TS函数的返回类型

为什么我的动画状态在组件实例之间共享?

下载量怎么会超过下载量?

Angular 16将独立组件作为对话框加载,而不进行布线或预加载

回调函数中的TypeScrip类型保护返回Incorect类型保护(具有其他未定义类型的返回保护类型)

在抽象类构造函数中获取子类型

从以下内容之一提取属性类型

在打印脚本中将对象类型转换为数组

如何调整项目数组,但允许权重影响顺序

Vite+Chrome扩展 list v3-;不能在模块外使用import语句;对于inpage脚本

const nav: typechecking = useNavigation() 和 const nav = useNavigation() 之间有什么区别?