正文內容必須更新，無需更改頁眉和頁腳，也不更新頁面

我有一個標題菜單，帶有「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

正文內容必須更新，無需更改頁眉和頁腳，也不更新頁面

回答

相關問題