[英]Dynamic change/revert page title in Angular
因此,我设法获取了页面位置,然后将其粘贴到标题组件中的h1中。 我还设法将鼠标悬停在导航项上时,标题h1动态更改为要悬停的文本:
这是我的问题:在mouseout上,即当我不将鼠标悬停在导航项上时,我需要标题才能恢复为最初呈现的页面位置:
示例:我在localhost:4200 / about,标题显示“ about”! 我将鼠标悬停在导航项“联系人”上,标题显示为“ contact”,现在当我将鼠标移离联系人时,我需要标题标题返回到“ about”位置。
我尝试了一种具有输入,输出和事件发射器的解决方案,该解决方案使子和父之间传递文本很多次,除了最终无法正常工作之外,它似乎为这么小的事情带来了解决方案的复杂性。
以下是我的nav-component.html
<nav class="nav-menu {{ menuStatus }}" (click)="closeNav($event)"> <ul> <li> <a routerLink="/about" (mouseover)="getText($event)" (click)="closeNav($event)">about</a> </li> <li> <a routerLink="/what-to-expect" (mouseover)="getText($event)" (click)="closeNav($event)">what to expect</a> </li> <li> <a routerLink="/gallery" (mouseover)="getText($event)" (click)="closeNav($event)">gallery</a> </li> <li> <a routerLink="/activities" (mouseover)="getText($event)" (click)="closeNav($event)">activities</a> </li> <li> <a routerLink="/contact" (mouseover)="getText($event)" (click)="closeNav($event)">contact</a> </li> </ul> </nav>
NAV-component.ts
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.scss'] }) export class NavComponent implements OnInit { title: string; navClose: boolean; @Output() sendTitle = new EventEmitter < string > (); @Output() closingNav = new EventEmitter < string > (); @Input() menuStatus: string; constructor() {} ngOnInit() {} getText($event) { this.title = event.target.innerText; this.sendTitle.emit(this.title) } closeNav($event) { this.navClose = false; this.closingNav.emit(this.navClose); } }
报头component.html
<header> <div class="header-left"> <h1>{{pageTitle}}</h1> </div> <div class="header-right"> <app-burger (opened)="burgerStatus($event)" [burgerClose]="navStatus"></app-burger> </div> </header> <app-nav (sendTitle)="getTitle($event)" [menuStatus]="burger" (closingNav)="getNavStatus($event)"></app-nav>
首部的组分-TS
import { Component, OnInit } from '@angular/core'; import { BurgerComponent } from './burger/burger.component'; import { Location } from "@angular/common"; import { Router } from "@angular/router"; @Component({ selector: 'app-header-component', templateUrl: './header-component.component.html', styleUrls: ['./header-component.component.scss'] }) export class HeaderComponentComponent implements OnInit { route: string; dynamicTitle: string; pageTitle: string; burger: string; navStatus: boolean; constructor(location: Location, router: Router) { router.events.subscribe(val => { this.pageTitle = location.path(); this.pageTitle = this.pageTitle.substring(1); }); } ngOnInit() { } getTitle($event) { this.dynamicTitle = $event; } burgerStatus($event) { this.burger = $event; console.log($event); } getNavStatus($event) { this.navStatus = $event; console.log($event); } }
非常感谢您的输入!
您可以创建属性来存储先前选择的值(在你的榜样about
当你将鼠标放置在contact
,然后在mouseout
将其分配给当前
您可以使用TitleService
在重定向到定义的路由时更改标题。
这是例子
export class AppComponent {
public constructor(private titleService: Title ) { }
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
你不认为,当事件发出时,您正在设置错误的模型。
getTitle($event) {
// this.dynamicTitle = $event;
this.pageTitle = $event;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.