Angular 2 automatisches Routing nach einigen Sekunden

Question

Wie kann ich von App-Komponente html zu einer anderen Komponente html in 2000 Millisekunden navigieren, ohne etwas zu klicken. Ich habe versucht mit router.navigate Methode, aber es funktioniert nicht. Es bleibt bei der App-Komponente html nur. App component.ts

import { Component ,OnInit} from '@angular/core'; 
import {RouterModule,Router} from '@angular/router'; 
import { SecondComponent } from './second/second.component'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 

}) 
export class AppComponent { 

constructor(private router: Router){} 

    ngAfterViewInit() { 
setTimeout(() => { 
    this.router.navigate(["/second"]); 
}, 2000); 
} 
    } 
    import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { SecondComponent } from './second/second.component'; 
import {RouterModule,Router,Routes} from '@angular/router' 
const appRoutes: Routes = [ 
    { path: 'second', component: SecondComponent }, 

]; 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    SecondComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(
     appRoutes, 
     { enableTracing: true } // <-- debugging purposes only 
    ) 
    ], 
bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

App component.html:

<div class="my-container"> 
    <h3 id ="h31">Digit</h3> 
</div> 


<router-outlet></router-outlet> 

NochNeSeite component.html: i auf dieser Seite nach 2 Sekunden umleiten möchten

<div class="my-container"> 

<h3>Insurance made simple</h3> 

<button type="button" class="btn btn-warning">Lets get started</button> 

</div> 

Answer 1

Im Grunde, was Sie Wollen Sie tun, starten Sie einen Timer mit setTimout und rufen Sie eine Funktion auf ihren Abschluss:

setTimeout(() => { 
    this.router.navigate(["foo"]); 
}, 2000); 

Answer 2

Bitte geben Sie die

setTimeout(() => { 
    this.router.navigate(["foo"]); 
}, 2000); 

im Lebenszyklus Haken ngAfterViewInit() wie dies in der Komponente verwenden,

ngAfterViewInit() { 
setTimeout(() => { 
    this.router.navigate(["foo"]); 
}, 2000); 
} 

Sehen, ob das das Problem behoben.

UPDATE

Ändern Sie bitte Ihre AppComponent die AfterViewInit LifeCycle Haken/Schnittstelle zu implementieren,

import { AfterViewInit } from '@angular/core'; 

export class AppComponent implements AfterViewInit { 

Update_2:

Idealerweise sollten, wenn Sie nicht den Inhalt zeigen, von der aktuellen app.component.html in Ihrem gerouteten SecondComponent, dann sollten Sie einen anderen machen Komponente (z. B. DefaultComponent), verschieben Sie den Rest der Vorlage anders als <router-outlet></router-outlet> von app.component.html in die Vorlage DefaultComponent und machen Sie dies als die Standardroute, um zu gehen, indem Sie den neuen Pfad (für DefaultComponent) und einen Standardpfad (zum neuen Pfad) als:

const appRoutes: Routes = [ 
{ path: '', redirectTo: '/default', pathMatch: 'full' }, 
{ path: 'default', component: DefaultComponent }, 
{ path: 'second', component: SecondComponent }, 
]; 

app.component.html

<router-outlet></router-outlet> <!-- Move the rest of the html present here to the DefaultComponent -->