时间戳

首页 > 解决方案 > Angular中的动态更改/还原页面标题

javascript - Angular中的动态更改/还原页面标题

问题描述

因此，我设法获取了页面位置，然后将其粘贴到标题组件中的 h1 中。我还设法将鼠标悬停在导航项上时，标题 h1 会动态更改为悬停的文本：

我的问题来了：在鼠标悬停时，即当我没有将鼠标悬停在导航项上时，我需要将标题恢复到最初呈现的页面位置：

示例：我在 localhost:4200/about，标题显示“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>

导航组件.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

<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);
  }
}

非常感谢您的意见！

标签： javascripthtmlangular

解决方案

您可以创建属性来存储先前选择的值（在您的示例中about，当您将鼠标悬停contact然后mouseout将其分配给当前值时

推荐阅读