我想显示没有标题的登录页面，但主页组件渲染了两次，我在主页上使用了主页组件，而不是应用程序组件，但仍在重复。稍微调查一下我知道 <router-outlet></router-outlet> 标签使家出现两次，但我不知道如何解决这个问题。我使用 *ngIf 是为了在登录页面处于活动状态时隐藏标题。
app.component.html
<app-header *ngIf="hiHead"></app-header>
<router-outlet></router-outlet>
<app-footer></<app-footer>
app.component.ts
import { Router, NavigationStart } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cdls-app';
hiHead: boolean = false;
ngOnInit() {
}
constructor(private router: Router) {
// on route change to '/login', set the variable showHead to false
router.events.forEach((event) => {
if (event instanceof NavigationStart) {
if (event['url'] == '/login') {
this.hiHead = false;
} else {
console.log("NU")
this.hiHead = true;
}
}
});
}
}
<app-footer></app-footer>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RegisterformComponent } from './registerform/registerform.component';
const routes: Routes = [
{ path: 'registro', component: RegisterformComponent },
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent },
{ path:'', redirectTo:'home', pathMatch:'full' },
{ path: '**', redirectTo:'home', pathMatch:'full' }
];
@NgModule({
declarations: [],
imports:
[RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
home.component.html
<div class="uk-position-relative uk-visible-toggle uk-light uk-text-middle" tabindex="-1" uk-slideshow="autoplay: true autoplay-interval: 6000 animation: push pause-on-hover: false">
<ul class="uk-slideshow-items">
<li>
<img style="filter:brightness(92%)" data-src="https://images.pexels.com/photos/4039155/pexels-photo-4039155.jpeg?cs=srgb&dl=pexels-cottonbro-4039155.jpg&fm=jpg" alt="" uk-cover uk-img>
<div style="padding-top:14%; padding-left: 50%; position:absolute; background-color:transparent;" class="uk-card uk-card-body uk-text-middle" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
<h3 style="font-family:'Lato', sans-serif; font-weight:bold; font-size:5vw; color: #fbf005" class="uk-card-title uk-text-middle">Familias</h3>
</div>
<div style="position:absolute; background-color:transparent;" class="" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<p style="margin-bottom:0; padding-bottom:0; padding-top:22%; padding-left:50%; padding-right:30px; font-family:'Lato', sans-serif; font-size:3.2vw; color:#fdfefe">Somos una comunidad que se apoya unos a otros. Conéctate con otras familias</p>
<h3 style="padding-top:0px; margin-top:0; padding-left:50%; font-family:'Lato', sans-serif;" class="uk-card-title"><a style="text-decoration: none; margin-top:4px; padding-left:0; color: #fbf005; font-size:2.5vw; background-color:transparent;" class="uk-card-title uk-text-left" href="#"><i class="fab fa-leanpub"></i> Aprende Más</a></h3>
</div>
</li>
<li>
<img style="filter:brightness(92%)" data-src="https://images.pexels.com/photos/5638612/pexels-photo-5638612.jpeg?cs=srgb&dl=pexels-askar-abayev-5638612.jpg&fm=jpg" alt="" uk-cover uk-img>
<div style="padding-top:14%; padding-left: 50%; position:absolute; background-color:transparent;" class="uk-card uk-card-body uk-text-middle" uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true">
<h3 style="font-family:'Lato', sans-serif; font-weight:bold; font-size:5vw; color: #0548fb" class="uk-card-title uk-text-middle">Profesionales</h3>
</div>
<div style="position:absolute; background-color:transparent;" class="" uk-scrollspy="cls: uk-animation-slide-top; repeat: true">
<p style="margin-bottom:0; padding-bottom:0; padding-top:22%; padding-left:50%; padding-right:30px; font-family:'Lato', sans-serif; font-size:3.2vw; color:#fdfefe">Somos el punto de contacto con otros profesionales de la salud, únete a nosotros</p>
<h3 style="padding-top:0px; margin-top:0; padding-left:50%; font-family:'Lato', sans-serif;" class="uk-card-title"><a style="text-decoration: none; margin-top:4px; padding-left:0; color: #0548fb; font-size:2.5vw; background-color:transparent;" class="uk-card-title uk-text-left" href="#"><i class="fas fa-users"></i> Conéctate</a></h3>
</div>
</li>
<li>
<img style="filter:brightness(92%)" data-src="https://images.pexels.com/photos/4386466/pexels-photo-4386466.jpeg?cs=srgb&dl=pexels-karolina-grabowska-4386466.jpg&fm=jpg" alt="" uk-cover uk-img>
<div style="padding-top:14%; padding-left: 50%; position:absolute; background-color:transparent;" class="uk-card uk-card-body uk-text-middle" uk-scrollspy="cls: uk-animation-slide-top; repeat: true">
<h3 style="font-family:'Lato', sans-serif; font-weight:bold; font-size:5vw; color:#fb053d;" class="uk-card-title uk-text-middle">Investigación</h3>
</div>
<div style="padding-top:22%; padding-left:50%; padding-right:30px; position:absolute; background-color:transparent;" class="" uk-scrollspy="cls: uk-animation-fade; repeat: true">
<p style="margin-bottom:0; padding-bottom:0;font-family:'Lato', sans-serif; font-size:3.2vw; color:#fdfefe">Investigamos para conocer más sobre CdLS con el apoyo de profesionales</p>
<h3 style="padding-top:0px; margin-top:0; padding-left:0%; font-family:'Lato', sans-serif;" class="uk-card-title"><a style="text-decoration: none; margin-top:4px; padding-left:0; color: #fb053d; font-size:2.5vw; background-color:transparent;" class="uk-card-title uk-text-left" href="#"><i class="fas fa-dna"></i> Conéctate</a></h3>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center" style="padding:30px; margin-left:auto; margin-right:auto; margin-top:30px;">
<h2 class="uk-card-title uk-text-center" style="padding-left:30px; margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;">¿Tienes Algún Familiar Diagnósticado con CdLS?</h2>
<p class="uk-text-center" style="width:70%; padding-left:30px; padding-right:0px; margin-left:auto; margin-right:auto; color: #17202a; font-family:'Lato', sans-serif; ">El síndrome de Cornelia de Lange ocurre en aproximadamente 1 de cada 10,000 nacimientos, actualmente en Colombia se han identificado alrededor de 100 casos, en los que la Fundación ha ayudado a familias con pacientes con esta rara enfermedad.</p>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-match" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
<div class="uk-card uk-card-default" style="background-color:#fdfefe">
<div class="uk-card-header" style="padding-left:0; padding-right:0; padding-top:0">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="" width="" height="" src="https://images.pexels.com/photos/8944291/pexels-photo-8944291.jpeg?cs=srgb&dl=pexels-anastasia-shuraeva-8944291.jpg&fm=jpg">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom uk-text-center" style="color:#1b4f72; font-family:'Lato', sans-serif; font-weight:bold">Familias</h3>
</div>
</div>
</div>
<div class="uk-card-body">
<p>Nuestra fuerza proviene de nuestra comunidad de familias que se apoyan unos a otros. Podemos conectarte con otras familias CdLS que atraviesan por retos similares</p>
</div>
<div class="uk-card-footer uk-text-center">
<a href="#" class="uk-button uk-button-text uk-text-center" style="font-weight:bold; color:#1b4f72;"><i class="fas fa-home"></i> Conoce Más</a>
</div>
</div>
<div class="uk-card uk-card-default" style="background-color:#fdfefe">
<div class="uk-card-header" style="padding-left:0; padding-right:0; padding-top:0">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="" width="" height="" src="https://images.pexels.com/photos/5327653/pexels-photo-5327653.jpeg?cs=srgb&dl=pexels-thirdman-5327653.jpg&fm=jpg">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom uk-text-center" style="color:#1b4f72; font-family:'Lato', sans-serif; font-weight:bold">Profesionales</h3>
</div>
</div>
</div>
<div class="uk-card-body">
<p>Si eres profesional en ciencias de la salud, únete a nosotros y conéctate con otros profesionales en el campo de estudio del sindrome del CdLS</p>
</div>
<div class="uk-card-footer uk-text-center">
<a href="#" class="uk-button uk-button-text uk-text-center" style="font-weight:bold; color:#1b4f72;"><i class="fas fa-user-tie"></i> Conoce Más</a>
</div>
</div>
<div class="uk-card uk-card-default" style="background-color:#fdfefe">
<div class="uk-card-header" style="padding-left:0; padding-right:0; padding-top:0">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="" width="" height="" src="https://images.pexels.com/photos/4033304/pexels-photo-4033304.jpeg?cs=srgb&dl=pexels-edward-jenner-4033304.jpg&fm=jpg">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom uk-text-center" style="color:#1b4f72; font-family:'Lato', sans-serif; font-weight:bold">Investigación</h3>
</div>
</div>
</div>
<div class="uk-card-body">
<p>Realizamos investigaciones para conocer más sobre el CdLS con el apoyo de profesionales en ciencias de la salud</p>
</div>
<div class="uk-card-footer uk-text-center" style="">
<a href="#" class="uk-button uk-button-text uk-text-center" style="font-weight:bold; color:#1b4f72;"><i class="fas fa-dna"></i> Conoce Más</a>
</div>
</div>
</div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center" style="margin-top:0px;">
<h2 class="uk-card-title uk-text-center" style="padding-left:20px; margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;">¿Quieres Ayudar? Únete y Sé Parte del Cambio, Ayúdando a Otros</h2>
</div>
</div>
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" style="" uk-scrollspy="cls: uk-animation-slide-left; repeat: true" uk-grid>
<div class="uk-card-media-left uk-cover-container">
<img src="https://images.pexels.com/photos/3204051/pexels-photo-3204051.jpeg?cs=srgb&dl=pexels-harrison-haines-3204051.jpg&fm=jpg" alt="" uk-cover>
<canvas width="600" height="400"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Donaciones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l" style="margin-top:0px; padding:0;">
<h2 class="uk-card-title uk-text-center" style="margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;"></h2>
</div>
</div>
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-scrollspy="cls: uk-animation-slide-right; repeat: true" uk-grid>
<div class="uk-flex-last@s uk-card-media-right uk-cover-container">
<img src="https://images.pexels.com/photos/3184397/pexels-photo-3184397.jpeg?cs=srgb&dl=pexels-fauxels-3184397.jpg&fm=jpg" alt="" uk-cover>
<canvas width="600" height="400"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Voluntariado</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center" style="margin-top:0px;">
<h2 class="uk-card-title uk-text-center" style="padding-left:20px; margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;">Casos CdLS en Colombia</h2>
</div>
</div>
<div class="uk-cover-container uk-height-medium uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center uk-responsive-height uk-responsive-width">
<iframe width="60%" height="auto" src="https://datastudio.google.com/embed/reporting/7c8d7d55-ee22-4185-852a-526a8c6f67da/page/RWqWC" frameborder="0" style="border:0; overflow: hidden;" allowfullscreen></iframe>
</div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center" style="margin-top:30px;">
<h2 class="uk-card-title uk-text-center" style="padding-left:20px; margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;">Somos Miembros Activos</h2>
</div>
</div>
<div class="uk-width-xlarge uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-container-center" style="padding-top:15px; padding-bottom:15px; margin-left:auto: margin-right:auto; background-color: #f8f9f9">
<div style="margin-left:auto: margin-right:auto;" class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="autoplay: true; autoplay-interval: 0; velocity: 0.03; easing: linear; pause-on-hover: false; draggable: false;">
<ul class="uk-slider-items uk-child-width-1-3 uk-child-width-1-3@m">
<li>
<div class="uk-panel uk-text-center" style="width:auto">
<img data-src="assets/images/cdlsFederationLogo.png" alt="cdlsFederation" style="height:8%; padding-left:15px; padding-right:15px; background-repeat:no-repeat; background-size:cover; object-fit: cover; margin-left:auto: margin-right:auto" uk-img>
<div class="uk-position-center uk-panel"><h1></h1></div>
</div>
</li>
<li>
<div class="uk-panel uk-text-center uk-position-center">
<img data-src="assets/images/Aliber.png" alt="" style="padding-left:15px; padding-right:15px; background-repeat:no-repeat; background-size:cover; object-fit:cover; margin-left:auto: margin-right:auto;" uk-img>
<div class="uk-position-center uk-panel"><h1></h1></div>
</div>
</li>
<li>
<div class="uk-panel uk-text-center uk-position-center">
<img data-src="assets/images/FenadecLogo.png" alt="" style="padding-left:auto; padding-right:auto; width:80%; background-repeat:no-repeat; background-size:cover; object-fit:cover; margin-left:auto: margin-right:auto;" uk-img>
<div class="uk-position-center uk-panel"><h1></h1></div>
</div>
</li>
<li>
<div class="uk-panel uk-text-center uk-position-center">
<img data-src="assets/images/EnHulogo.png" alt="" style="padding-left:15px; padding-right:15px; width:80%; background-repeat:no-repeat; background-size:cover; object-fit: cover; margin-left:auto: margin-right:auto" uk-img>
<div class="uk-position-center uk-panel"><h1></h1></div>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div></div>
<div uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card-body; delay: 500; repeat: true">
<div class="uk-card uk-card-body uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l" style="margin-top:0px;">
<h2 class="uk-card-title uk-text-center" style="padding-left:30px; margin-left:auto; margin-right:auto; color: #00000; font-family:'Lato', sans-serif; font-weight:bold;">¿Tienes Preguntas? Nosotros te las respondemos!</h2>
<p class="uk-text-center" style="width:70%; padding-left:30px; padding-right:0px; margin-left:auto; margin-right:auto; color: #17202a; font-family:'Lato', sans-serif; ">Si necesitas asistencia, estamos aquí para ti!</p>
</div>
<div class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-text-center" style="margin-top:0; width:100%; margin-left:auto; margin-right:auto; margin-bottom:30px;" uk-scrollspy="cls: uk-animation-fade; target: .uk-button-primary; delay: 500; repeat: true">
<button class="uk-button uk-button-primary uk-text-center">Déjanos tus datos</button>
</div>
</div>
login.component.html
<body>
<div class="uk-child-width-1-1@s uk-light" uk-grid>
<div>
<div class="uk-background-cover uk-height-large uk-panel uk-flex uk-flex-center uk-flex-middle uk-background-norepeat" style="background-image: url('https://images.pexels.com/photos/5792901/pexels-photo-5792901.jpeg?cs=srgb&dl=pexels-yan-krukov-5792901.jpg&fm=jpg'); height:120vh">
<div class="uk-card uk-card-default uk-width-1-2@m" style="margin-left:15px; margin-right:15px; background-color: #ffffff; border-radius:12px; width:450px">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="80" height="80" data-src="/assets/images/logofundacion.png" uk-img>
</div>
<div class="uk-width-expand uk-text-center" style="width:100%;">
<h3 class="uk-card-title uk-margin-remove-bottom uk-text-center" style="color:#1a5276; font-family:'Lato', sans-serif; font-weight:bold;">Inicio de Sesión</h3>
</div>
</div>
</div>
<div class="uk-card-body" style="background-color:#fffffff;">
<form style="color:#212f3d;">
<fieldset class="uk-fieldset" style="color:#212f3d;">
<span class="uk-label uk-text-capitalize" style="color:#1a5276; font-family:'Lato', sans-serif; font-weight:bold">Usuario</span>
<div class="uk-margin" style="color: #212f3d;">
<div class="uk-inline uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
<span class="uk-form-icon" uk-icon="icon: user" style="color:#abb2b9"></span>
<input class="uk-input" type="text" placeholder="usuario" style="border: 1px solid #abb2b9; color:#212f3d; border-radius:5px;">
</div>
</div>
<span class="uk-label uk-text-capitalize" style="color:#1a5276; font-family:'Lato', sans-serif; font-weight:bold">Contraseña</span>
<div class="uk-margin" style="color: #212f3d">
<div class="uk-inline uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
<span class="uk-form-icon" uk-icon="icon: lock" style="color:#abb2b9"></span>
<input class="uk-input" type="text" placeholder="" style="border: 1px solid #abb2b9; border-color: #abb2b9; color:#212f3d; border-radius:5px;">
</div>
</div>
<span class="uk-label uk-text-capitalize" style="font-family:'Lato', sans-serif;">¿Todavía no tienes una cuenta? <a class="uk-link-text" href="/registro" style="color:#2874a6;"> Regístrate gratis</a></span>
</fieldset>
</form>
</div>
<div class="uk-card-footer uk-text-center" style="margin-left:auto; margin-right:auto">
<button href="#" class="uk-button uk-button-primary uk-text-center" style="margin-left:auto; margin-right:auto; background-color:#2471a3; color:#fdfefe; border-radius:5px">Iniciar Sesión</button>
</div>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：1)
虽然它可能无助于渲染您的页面两次。我不认为使用 router.events.foreach() 是确定您是否在登录页面上的好方法。
为此，您可以在路线上使用 data 属性。
在路线中：
const ROUTES = [
{
path: '/login',
component: LoginComponent,
data: { hiHead: false }
}
]
获取数据：
constructor(
private route: ActivatedRoute,
...
) { }
ngOnInit(): void {
this.hiHead = this.route.snapshot.data['hiHead']
...
}