Question

我想在我的应用程序中进行重定向需要6秒，然后它会将您重定向到我的应用程序的主页。我无法弄清楚如何做到这一点。

我正在使用Angular和唯一一个关于此主题的Stack Overflow帖子在AngularJS中。

-------------------- UPDATE ---------------

这些是我的路线：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from "./components/app/app.component";
import { HomeComponent } from "./components/home/home.component";
import { PageHeaderComponent } from "./components/pageheader/pageheader.component";
import { ChangeLanguageComponent } from "./components/change-language/change-language.component";
import { CheckinComponent } from "./components/checkin/checkin.component";

import { TranslationService } from "./services/translation.service";
import { ClockService } from "./services/clock.service";
import { ConfigService } from "./services/config.service";
import { DomainService } from "./services/domain.service";
import { KeyboardService } from "./services/keyboard.service";
import { BookingService } from "./services/booking.service";
import { MainService } from "./services/main.service";
import { ForgotMarkComponent } from "./components/forgotmark/forgotmark.component";
import { ContentHolderComponent } from "./components/contentholder/contentholder.component";

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageHeaderComponent,
    ChangeLanguageComponent,
      CheckinComponent,
      ForgotMarkComponent,
      ContentHolderComponent
  ],
  imports: [
    CommonModule,
    HttpModule,
    FormsModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: "", redirectTo: "home", pathMatch: "full" },
      { path: "home", component: HomeComponent },
      { path: "Change-Language", component: ChangeLanguageComponent },
        { path: "checkin", component: CheckinComponent },
        { path: "forgotmark", component: ForgotMarkComponent },
      { path: "**", redirectTo: "home" }
    ])
  ],
  providers: [
    TranslationService,
    ClockService,
    ConfigService,
    DomainService,
    KeyboardService,
    BookingService,
    MainService
  ]
})
export class AppModuleShared {}

这是我的TS档案：

import { TranslationService } from "../../services/translation.service";
import { ClockService } from "../../services/clock.service";
import { PageHeaderComponent } from "../pageheader/pageheader.component";
import { Component, Injectable, OnInit } from "@angular/core";
import { DatePipe, Location } from "@angular/common";
import { Router } from '@angular/router';

@Component({
  selector: "forgotmark",
    templateUrl: "./forgotmark.component.html", 
    styleUrls: ["./forgotmark.component.css"]

})

@Injectable()
export class ForgotMarkComponent implements OnInit {
  constructor(
    public translationservice: TranslationService,
    public clockservice: ClockService,
    private location: Location,
    private router: Router
    ) { }

    ngOnInit() {
        setTimeout(() => {
            this.router.navigate(['/home']);
        }, 6000);
    }

    goBack(): void {
        this.location.back();
    }
}

Answer 1

`

import { Router } from '@angular/router';

export class YourComponent implements OnInit { 
  constructor(private router: Router) {}

  ngOnInit() {
    setTimeout(() => {
      this.router.navigate(['/redirectURL']);
    }, 6000);
  }
}

`

您可以执行类似此操作和路由配置。

Answer 2

做这样的事情。

你的ts文件中的

    import { Router } from '@angular/router';

    constructor(private router: Router) {}
      ngOnInit(){
       setTimeout(() => {
      this.router.navigate(['/destination']);
    }, 6000);
}

Answer 3

您可以添加解析功能，这需要几秒钟才能完成。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { OneComponent } from './one.component';
import { TwoComponent } from './two.component';

import { delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

const routes = [
  {
    path: 'one', component: OneComponent, resolve: {
      load: 'loading'
    }
  },
  { path: 'two', component: TwoComponent },
]

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, OneComponent, TwoComponent],
  providers: [{
    provide: 'loading',
    useValue: () => of(true).pipe(delay(3000))
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用此路由配置，只要您尝试导航到/one路由，就必须等待3秒。您可以将相同的解析功能添加到您的主组件。

Live demo

在＆＃39; X＆＃39;之后重定向秒

3 个答案: