Question

我刚开始使用angular 2.我遇到了网页重新加载的问题。页面加载完成后，我导航到另一个页面并按下后退按钮，页面自动重新加载。有人帮帮我，怎么预防呢？

Answer 1

您应该使用路由器插座来配置您的状态，以便页面不会刷新。

Angular Router 可在用户执行应用程序任务时从一个视图导航到下一个视图。

详细了解 Routing and Navigation

Answer 2

您是否检查过您的RouterModule，

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent,
        RegistrationComponent
    ],
    imports: [
        UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})

并添加到app.component中，如

<div class='row'>
    <router-outlet></router-outlet>
</div>

路由器插座之类似，

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a class='navbar-brand' [routerLink]="['/home']">
                         <span class='glyphicon glyphicon-home'></span> Logo
                    </a>
                </li> 
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/login']">
                        <span class='glyphicon glyphicon-Tab1'></span> Login
                    </a>
                </li> 
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/registration']">
                        <span class='glyphicon glyphicon-Tab2'></span> Register
                    </a>
                </li> 
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/Tab3']">
                        <span class='glyphicon glyphicon-Tab3'></span> Tab3
                    </a>
                </li> 
            </ul>          
        </div>
    </div>
</div>

我希望它可以帮到你。

以角度2重新加载页面

2 个答案: