[英]Dynamic change/revert page title in Angular
So I have managed to get the page location which i then paste in a h1 in my header component. 因此,我设法获取了页面位置,然后将其粘贴到标题组件中的h1中。 I have also managed that when one hovers over the navigation items, the header h1 changes dynamically to the text that is being hovered:
我还设法将鼠标悬停在导航项上时,标题h1动态更改为要悬停的文本:
Here comes my problem: on mouseout, that is when I am not hovering on a navigation item I need the title to revert back to the the page location that was initially rendered: 这是我的问题:在mouseout上,即当我不将鼠标悬停在导航项上时,我需要标题才能恢复为最初呈现的页面位置:
Example: I am at localhost:4200/about, the header shows "about"! 示例:我在localhost:4200 / about,标题显示“ about”! I hover over a navigation item "contact", the header shows "contact", now when i move the mouse away from contact i need the header title back to location that is "about".
我将鼠标悬停在导航项“联系人”上,标题显示为“ contact”,现在当我将鼠标移离联系人时,我需要标题标题返回到“ about”位置。
I have tried a solution with input, output and event emmiters passing the text between child and parent a lot of times, apart from that not ending up working, its seems to complication of a solution for something so small. 我尝试了一种具有输入,输出和事件发射器的解决方案,该解决方案使子和父之间传递文本很多次,除了最终无法正常工作之外,它似乎为这么小的事情带来了解决方案的复杂性。
Below is my nav-component.html 以下是我的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 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); } }
header-component.html 报头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>
header-component-ts 首部的组分-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); } }
Your input is much appreciated! 非常感谢您的输入!
您可以创建属性来存储先前选择的值(在你的榜样about
当你将鼠标放置在contact
,然后在mouseout
将其分配给当前
You can Use TitleService
for change your title on redirecting to your defined route. 您可以使用
TitleService
在重定向到定义的路由时更改标题。
Here is example 这是例子
export class AppComponent {
public constructor(private titleService: Title ) { }
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
Don't you think, you are setting wrong model when event emits. 你不认为,当事件发出时,您正在设置错误的模型。
getTitle($event) {
// this.dynamicTitle = $event;
this.pageTitle = $event;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.