以角度2重新加载页面答案

【问题标题】：Reload page in angular 2以角度2重新加载页面
【发布时间】：2017-10-22 20:58:52
【问题描述】：

我刚从 angular 2 开始。页面重新加载有问题。页面加载完成后，我导航到另一个页面并按下后退按钮，页面自动重新加载。哪位大神帮帮忙，怎么预防？

【问题讨论】：

点击返回按钮后，发生了什么？你需要什么？
我需要该页面不再重新加载，因为它在我启动网页时首先加载完成
明确，点击后退按钮时哪些页面会重新加载？已经加载的页面还是最后一页？解释清楚，不要混用！
好吧，我解释清楚，让你明白。当我启动我的网站时，它的主页包含导航栏。然后我点击导航栏导航到第二页然后点击返回按钮，主页重新加载。如何预防？

【解决方案1】：

你检查过你的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>

Router-outlet 的样子，

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

你应该使用 router-outlet 来配置你的状态，这样页面就不会被刷新。

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

在 Routing and Navigation

上阅读更多信息

【讨论】：

感谢您的支持，但我从服务器获取的所有数据都不是在本地。我尝试使用本地数据，它运行正常
从哪里获取数据并不重要
我不知道为什么，但是当我使用本地数据时，它没有问题
const routes: Routes = [ {path: '', component: HomepageComponent}, {path: 'tintuc/:category', component: TrangTinTongHopComponent}, {path: 'noidung/:route/: id/:title'，组件：TrangNoiDungComponent}，{路径：'hoidap'，组件：TrangHoiDapComponent}，{路径：'trangnguoidung'，组件：TrangNguoiDungComponent}，{路径：'tracuudiemthi'，组件：TrangXemDiemComponent}]； @NgModule({ 进口：[RouterModule.forRoot(routes)]，出口：[RouterModule] })