基本上,我有一个使用路由器链接加载的页面,我希望它也能通过使用路由器链接来改变内容,但我不想复制和粘贴topBar和botBar的html。基本上,路由器链接是用来进入每个页面,然后我想用它来改变它的内容,而不需要总是复制topBar和botBar的HTML。
/*This is the routing for every page there is. The HTML shown is for /douroVinhas*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomePageComponent} from './home-page/home-page.component';
import {DouroVinhasComponent} from './douro-vinhas/douro-vinhas.component';
import {AVerOMarComponent} from './a-ver-omar/a-ver-omar.component';
import {MediterraneoComponent} from './mediterraneo/mediterraneo.component';
const routes: Routes = [
{ path: '', redirectTo: '/homePage', pathMatch: 'full' },
{ path: 'homePage', component: HomePageComponent },
{ path: 'douroVinhas', component: DouroVinhasComponent },
{ path: 'aVerOMar', component: AVerOMarComponent },
{ path: 'mediterraneo', component: MediterraneoComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
.hotelPage {
display: grid;
grid-template-columns: auto;
grid-template-rows: 180px auto;
}
.topo {
grid-row-start: 1;
grid-row-end: 1;
text-align: center;
background-color: black;
}
.logo {
float: left;
width: auto;
color: white;
max-width: 15%;
max-height: 100%;
margin-top: 0.5%;
z-index: 10;
}
.nomeHotel {
position: absolute;
color: white;
text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
z-index: 0;
left: 40%;
}
.topNav {
color: white;
float: right;
padding-right: 0;
top: 0;
text-align: center;
font-size: 250%;
text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
width: 35%;
padding-top: 2%;
}
.topNavA {
padding: 5%;
}
.telefone {
width: 5%;
height: 5%;
}
.botBar {
background-color: black;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
padding: 5%;
}
.botBar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 15px;
}
#nrTelefone,
#mail {
color: white;
}
.icon {
width: 10%;
}
<div class="hotelPage">
<div class="topo">
<div class="topNav">
<button>Change Content</button>
</div>
</div>
<div class="content">This is what I want to be loaded using router link, basically this part changes by pressing a button on topNav.</div>
<div class="botBar">
</div>
</div>
Router-outlet
允许你渲染通过路由加载的组件。
更多信息,你可以阅读它 此处
您可以简单地使用 router-outlet
如下
<div class="hotelPage">
<div class="topo">
<div class="topNav">
<button>Change Content</button>
</div>
</div>
<div class="content">
<router-outlet></router-outlet>
</div>
<div class="botBar">
</div>
</div>
还有,为什么你有 angular 1.7
脚本在你的html中?你是否同时使用angularjs和angular?