Question

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

Answer 1

您可以使用ajax：

$("#link1").click(function(){
    $.ajax({
        url: url, //get the url of the link
        type: post,
        success: function(result){
            // Arrange your data according to your html webpage 
            // If the result is already aligned as per your structure then directly put it into the div you want to replace the content
            $("#container").empty();
            $container.append(arrangedHtmlStructure);
        }
    })

})

Answer 2

function show (pagenum) {
  $('.page').css('display','none');
   if (pagenum == 0 ) {
      $('.home').css('display','block');
   }
   if (pagenum == 1 ) {
      $('.about').css('display','block');
   }
}

.header,.footer {
   background: black;

}
.menu a{
      color: white;
}

.about {
   display : none
}

.footer {
 position : fixed;
  bottom:0;
  width:100%;
  color:white;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
         <div class="header">
              <ul class="menu">
                  <li>
                      <a href="#" onclick="show(0)" >Home</a>
                                          <a href="#" onclick="show(1)" >About Us</a>
                  </li>
              </ul>
         </div>
         <div class="home page" >This is Home</div>
         <div class="about page">This is About</div>
          <div class="footer">This is footer</div>
  </body>
</html>

Answer 3

您要找的是路由器。有关路由和导航的信息，请参阅the official Angular 2 docs以获取有关此主题的更详细信息。

我set up a Plunker为您提供Angular 2中路由的基本示例。

路由发生在名为app.routing.ts的新文件中，请参阅下面的重要部分：

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

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

首先导入要导航到的组件（如页面），之后设置导航到的路径（如地址栏中的url）。导航到foo.com/aboutus时，path: 'aboutus', component: AboutUsComponent会加载AboutUsComponent。

在HTML中，主要更改是您不使用<a href="/aboutus">，而是<a routerLink="/aboutus"</a>，因此Angular知道导航到哪里（请参阅下面的代码）。

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

使用代码并查看文档以便摆脱它。

一面注意
请在将来的问题中，在代码中添加一个起点，以便轻松回答您的问题。另请参阅https://stackoverflow.com/help/mcve

必须更新正文内容，不更改页眉和页脚，也不刷新页面

3 个答案: