Question

在我使用时,我已经减少,但有两个问题:

If I refresh then the value from the dropdown is blank
If I visit the link via URI the dropdown is empty

我基本上想根据我所依赖的命令保留名字。 drop倒和选择一页的多条命令。

// Topbar:

export class AppTopbarComponent implements OnInit {
  items?: MenuItem[];
  orders: Order[] = [];
  filteredOrders: any[] = [];
  selectedOrder: any[] = [];
  displayRoutes: string[] = [ /order ];

  constructor(
    public appMain: AppMainComponent,
    private ordersService: OrderService,
    private router: Router,
    private orderSelectionService: OrderSelectionService
  ) {}

  ngOnInit(): void {
    this.ordersService.getAllOrders().subscribe((orders) => {
      this.orders = orders;
    });

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        const shouldDisplayDropdown = this.displayRoutes.some((route) => event.url.startsWith(route));
        this.selectedOrder = shouldDisplayDropdown ? this.selectedOrder : [];
      }
    });

    this.orderSelectionService.selectedOrderName$.subscribe((selectedOrderName) => {
      this.selectedOrder = selectedOrderName;
    });
  }

  onOrderSelect(event: any) {
    const selectedOrderId = event.Id;
    this.orderSelectionService.setSelectedOrderName(event || []);
    this.router.navigate([ /order , selectedOrderId,  home ]);
  }
}

// Service:

@Injectable({
  providedIn:  root ,
})
export class OrderSelectionService {
  private selectedOrderSource = new BehaviorSubject<any[]>([]);

  selectedOrderName$: Observable<any[]> = this.selectedOrderSource.asObservable();

  setSelectedOrderName(orderName: any[]) {
    this.selectedOrderSource.next(orderName);
  }
}

到目前为止,我已经试图走这条路。

this.activatedRoute.params.subscribe((params) => {
  console.log( Route Params: , params);
  const selectedOrderId = params[ id ];
  this.selectedOrder = this.orders.find((order) => order.Id === selectedOrderId) || [];
});

但它没有定义。

确实需要一些帮助,确定这样做的最佳办法。显示作用和这样做的方法,只是当不在某些路线上时重新开始下降。

Answer 1

当你重新筛选服务信标时,就能够摆脱维持国家的职能,依靠陶器,因此这个主题不会有任何价值,因此你可以调整如下的守则。

如果你仍然面临问题,你可以同大家分享一个重复的问题!

// Topbar:

export class AppTopbarComponent implements OnInit {
  items?: MenuItem[];
  orders: Order[] = [];
  filteredOrders: any[] = [];
  selectedOrder: any[] = [];
  displayRoutes: string[] = [ /order ];

  constructor(
    public appMain: AppMainComponent,
    private ordersService: OrderService,
    private router: Router,
    private orderSelectionService: OrderSelectionService
  ) {}

  ngOnInit(): void {
    this.ordersService.getAllOrders().subscribe((orders) => {
      this.orders = orders;
    });

    this.activatedRoute.params.subscribe((params) => {
        console.log( Route Params: , params);
        const selectedOrderId = params[ id ];
        this.selectedOrder = this.orders.find((order) => order.Id ===  
            selectedOrderId) || [];
        // const shouldDisplayDropdown = this.displayRoutes.some((route) => event.url.startsWith(route)); // <-- this condition seems to be wrong, require stackblitz to debug
        const shouldDisplayDropdown = this.displayRoutes.some((route) => this.router.url.includes(route)) // get any route that matches the url
        this.selectedOrder = shouldDisplayDropdown ? [this.selectedOrder] : 
            [];
    });

  onOrderSelect(event: any) {
    const selectedOrderId = event.Id;
    this.router.navigate([ /order , selectedOrderId,  home ]);
  }
}

友情链接