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

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

来源

2016-09-23 Ravikanth

你在找什么是路由器。关于路由和导航，请参阅the official Angular 2 docs以获得有关此主题的更详细视图。

我已经set up a Plunker给你在角2

路由发生在一个新的文件路由的一个基本的例子，叫做app.routing.ts，请参阅下面的重要组成部分：

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。

在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

来源

2016-09-23 08:34:43 Roy

您可以使用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); 
     } 
    }) 

})

来源

2016-09-23 04:21:24

OP明确表示他不想要jQuery解决方案 – Liam

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>

来源

2016-09-23 04:24:12 SaJed

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

回答

相关问题