"home"と "about us"のヘッダーメニューがあります。デフォルトでホームページが読み込まれます。ホームページには、ホームページにリンクがあります。ホームページのリンクや「私たちについて」ボタンをクリックすると、本文の内容をホームページで変更する必要がありますが、ページを更新する必要はありません。 「私たちについて」関連データは表示されなければなりません。ヘッダーとフッターのページはすべてのページに共通で、本文の内容のみをページの更新なしで更新する必要があります。 jqueryを使用したり、サーバーコールを使用したりしたくない。ヘッダーとフッターを変更せずにページの更新を行わずに本文のコンテンツを更新する必要があります
はルータです。ルーティングとナビゲーションについては、the official Angular 2 docsを参照してください。
私はあなたにルーティングが新しいファイルで起こる角度2.
のルーティングの基本的な例を与える、app.routing.ts呼ばれ、重要な部分については下記を参照してくださいset up a Plunkerをしました：
import { HomeComponent } from './home.component';
import { AboutUsComponent } from './aboutus.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'aboutus', component: AboutUsComponent }
];
ファーストナビゲート先のコンポーネント（ページなど）をインポートした後、そのパスを（アドレスバーのURLのように）ナビゲートするように設定します。 path: 'aboutus', component: AboutUsComponentは、foo.com/aboutusにナビゲートするときに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
あなたはこのために、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);
}
})
})
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>
OPはjQueryソリューションを望まないと明示しています – Liam