Angular: сделать роутерLink внутри роутераLink - PullRequest
Новая
       18

Angular: сделать роутерLink внутри роутераLink

0 голосов
/ 24 апреля 2020

В основном у меня есть страница, которая загружается с использованием ссылки на маршрутизатор, и я хочу, чтобы она также меняла содержимое с помощью ссылки на маршрутизатор, но я не хочу копировать вставку html из topBar и botBar , По существу, routerLink используется для go каждой страницы, и затем я хочу использовать его для изменения содержимого без необходимости всегда копировать HTML topBar и botBar. 

/*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>

1 Ответ

1 голос
/ 24 апреля 2020

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 вместе?

...