正文内容必须更新，而页眉和页脚没有更改，也没有页面刷新 [英] body content has to be update without header and footer change and no page refresh

问题描述

我有一个带有主页"和关于我们"按钮的标题菜单.默认情况下加载主页.在主页中，我在主页中有一个链接.当我单击主页上的链接或关于我们"按钮时，正文内容必须在主页中进行更改，但页面不应刷新.必须显示关于我们"的相关数据.页眉页脚页对于所有页面都是通用的，只需要更新正文内容而无需刷新页面.我不想在这里使用任何jquery或没有服务器调用.

I have a header menu with buttons "home" and "about us". By default home page loads. In the home page, i have a link in the home page. when i click on the link on the home page or "about us" button, the body content has to be changed in the home page but page should not be refresh. "About us" related data has to be display. Header and footer page is common for all pages and only body content has to be updated without page refresh. I don't want to use any jquery or no server call here.

推荐答案

您正在寻找的是路由器.有关路由和导航的详情，请参见 Angular 2官方文档有关此主题的详细视图.

What you are looking for is Router. See the official Angular 2 docs on routing and navigation to get a more detailed view on this subject.

我已经设置了Plunker ，为您提供了在Angular 2中进行路由的基本示例.

I've set up a Plunker to give you a basic example of routing in Angular 2.

路由发生在一个名为app.routing.ts的新文件中，有关重要部分，请参见下文:

The routing happens in a new file, called app.routing.ts, see below for the important parts:

import { HomeComponent }  from './home.component';
import { AboutUsComponent }    from './aboutus.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'aboutus', component: AboutUsComponent }
];

首先，导入要导航到的组件(例如页面)，然后设置要导航到的路径(例如地址栏中的网址).导航到foo.com/aboutus时，path: 'aboutus', component: AboutUsComponent将加载AboutUsComponent.

First you import the components (like pages) where you want to navigate to and after that you set the paths for it to navigate to (like the url in the address bar). path: 'aboutus', component: AboutUsComponent will load the AboutUsComponent when navigating to foo.com/aboutus.

在HTML中，主要更改是您没有使用<a href="/aboutus">，而是使用了<a routerLink="/aboutus"</a>，因此Angular知道要导航到的位置(请参见下面的代码).

In the HTML, the main changes are that you don't use <a href="/aboutus">, but <a routerLink="/aboutus"</a>, so Angular knows where to navigate to (see code below).

<nav>
  <a routerLink="">Home</a>
  <a routerLink="/aboutus">About us</a>
</nav>

试一下代码并查看文档，以摆脱困境.

Play around with the code and see the documentation in order to get the hang out of it.

旁注
请在以后的问题中，在代码中添加一个起点，以便您的问题可以轻松得到解答.另请参见 https://stackoverflow.com/help/mcve

One side note
Please, in future questions, add a starting point in code so your question can be easily answered. See also https://stackoverflow.com/help/mcve

这篇关于正文内容必须更新，而页眉和页脚没有更改，也没有页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！