在Angular中動態更改/還原頁面標題

Question

因此，我設法獲取了頁面位置，然后將其粘貼到標題組件中的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); } } 

非常感謝您的輸入！

Answer 1

您可以創建屬性來存儲先前選擇的值（在你的榜樣about當你將鼠標放置在contact ，然后在mouseout將其分配給當前

Answer 2

您可以使用TitleService在重定向到定義的路由時更改標題。

這是例子

export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

Answer 3

你不認為，當事件發出時，您正在設置錯誤的模型。

 getTitle($event) {
      // this.dynamicTitle = $event;
      this.pageTitle = $event;
  }