时间戳

首页 > 解决方案 > 如何以不同的指定时间显示不同的组件？

angular - 如何以不同的指定时间显示不同的组件？

问题描述

我有两个不同的 Angular 7 组件ProductComponent，MemberComponent我想用不同的时间来展示它们。例如，我扫描了一个条形码，该条形码是会员，然后它会显示MemberComponent10 秒，而如果我扫描一个产品条形码，它将显示ProductComponent30 秒。我怎样才能做到这一点？

我已经尝试在两个组件上使用 setTimeout 函数，指定时间间隔，但它似乎会影响其他组件。

当我扫描会员条码和扫描产品条码时，ProductComponent仅显示 10 秒而不是 30 秒。



这是我的member.component.ts代码

ngOnInit() {
  this.route.params.subscribe(params => {
    this.barcode = params['id'];

    this.loadMember();

    setTimeout(() => {
      this.router.navigate(['']);
    }, 10000); // I wan't to display this component for 10 seconds
  });
}



这是我的product.component.ts代码

ngOnInit() {
  this.route.data.subscribe(result => {
    this._json = result.json;
  });

  if (this._json == null) {
    this.route.params.subscribe(params => {
      this.barcode = params['id'];

      if ( this.barcode === '' ) {
        return;
      } else {
        this.loadProduct();

        setTimeout(() => {
          this.router.navigate(['']);
        }, 30000); // I wan't to display this component for 30 seconds
      }
  });
}

标签： angulartypescriptcountdownangular-components

解决方案

下面是一个显示/隐藏使用的工作示例ngIf

1. 创建项目

ng new project --routing

ng g c barcode

ng g c member

ng g c product

2. 添加带参数的路由

在app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BarcodeComponent } from './barcode/barcode.component';

const routes: Routes = [
  { path: 'barcode/:type/:id', component: BarcodeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. 使用ngIf将Product和Member组件添加到Barcode组件

在barcode.component.html

<app-product *ngIf="scanType == 'product'"></app-product>
<app-member *ngIf="scanType == 'member'"></app-member>

在barcode.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-barcode',
  templateUrl: './barcode.component.html',
  styleUrls: ['./barcode.component.scss']
})
export class BarcodeComponent implements OnInit {

  scanType: string = ""

  constructor(
    private route: ActivatedRoute
  ) {
    this.route.params.subscribe(params => {
      this.scanType = params['type'] || ''
      let time = (params['type'] == "member") ? 10000 : 30000
      setTimeout(()=> {
        this.scanType = ""
      }, time)
    })
  }

  ngOnInit() {
  }
}

4. 测试

你可以尝试导航到

/barcode/member/uid

或者

/barcode/product/pid

推荐阅读