角2自动路由几秒后

-1

我怎么能从应用程序组件html导航到另一个组件在2000毫秒毫秒没有点击任何。我尝试使用router.navigate方法，但它不工作。它停留在应用程序组件html只要。应用component.ts角2自动路由几秒后

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 { 
}

应用component.html：

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


<router-outlet></router-outlet>

secondpage component.html：我想2秒

<div class="my-container"> 

<h3>Insurance made simple</h3> 

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

</div>

来源

2017-09-15 Nikhil Kumar

请提供你已经尝试过了 – GurV

应用component.ts –

是目标成分相同（添加PARAMS或东西）或者不同的代码？ – GurV

基本上，后重定向到这个页面你想要做的是，启动一个使用setTimout的定时器并在其完成时调用一个函数：

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

来源

2017-09-15 13:37:09 GurV

我试过但它不起作用 –

从'@ angular/core'导入{Component，OnInit}; 从'@ angular/router'导入{RouterModule，Router}; 从'./second/second.component'中导入{SecondComponent}; @Component（{ 选择： '应用根'， templateUrl： './app.component.html'， styleUrls：[” ./app.component。CSS']， }）出口类AppComponent { 构造（私人路由器：路由器）{} ngOnInit（）{ 的setTimeout（（）=> { this.router.navigate（[“第二“]）; }，2000）; } } –

您是否在控制台查看错误？ – GurV

请使用

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

在生命周期挂钩ngAfterViewInit()这样的组件，

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

看看是否能固定您的问题。

UPDATE

修改您AppComponent实施AfterViewInit生命周期挂钩/接口，

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

export class AppComponent implements AfterViewInit {

UPDATE_2：

理想的情况下，如果你不希望显示的内容目前app.component.html在你路由的SecondComponent中，那么你应该让另一个组件（例如DefaultComponent），将<router-outlet></router-outlet>以外的其他模板从app.component.html移动到DefaultComponent的模板，并通过设置新路径（DefaultComponent）和默认路径（新路径）为：

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 -->

来源

2017-09-15 13:46:34 amal

给我的错误显示找不到名字的setTimeout –

@NikhilKumar - 使用'setTimeout'，而不是'setTimeOut' – GurV

给错误控制台 –

角2自动路由几秒后

回答

相关问题