Angular。在routerLink里面做一个routerLink。

问题描述 投票:0回答:1

基本上,我有一个使用路由器链接加载的页面,我希望它也能通过使用路由器链接来改变内容,但我不想复制和粘贴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>
html css angular angular-routing
1个回答
1
投票

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?

© www.soinside.com 2019 - 2024. All rights reserved.