Question

app.component.html中有一个类似这样的页面

<div class="sidenav">
  <img src="../../../assets/images/control-hub-white.svg">
  <a  (click)="onClickHandler('Clusters')" style="color:#05a1bf" > Link1 </a>
  <a  (click)="onClickHandler('Checks')" >Link2</a>
  <a href="/test3">Test3</a>
  <a href="#contact">Contact</a>
</div>
<router-outlet></router-outlet>
<h1> {{ heading }} </h1>

我在app.component.ts中有一个onClickHandler

export class AppComponent  implements OnInit {
 heading = 'default heading';
  ............
 onClickHandler(heading: string){
    this.heading = heading;
    alert(heading);
}

在这里，当我单击链接（群集）时，我收到了预期的警报例如“群集”，“检查”。但是当单击链接后出现新页面时，我将标题作为默认标题。

有人可以告诉我我要去哪里错吗？

Answer 1

再次返回到此页面时，app.component再次启动。因此，您将再次仅获得“默认标题”。为了保留您的最后标题，请使用服务。

在app.module.ts的提供商中注册您的服务

app.service.ts

import { Injectable} from '@angular/core';

@Injectable()
export class AppService { 
   heading: string = 'default heading';
}

app.components.ts

import {AppServices} from './app.service';

export class AppComponent  implements OnInit {

    constructor(private appService: AppService){}

    heading: string;

    onInint() {
       this.heading = this.appService.heading;
    }

    onClickHandler(heading: string){
        this.appService.heading = heading;
        alert(heading);
    }
}

将页面标题设置为angular时出现问题

1 个答案: