选定组件的角度显示标题

Posted 2023-02-23

【中文标题】选定组件的角度显示标题

【英文标题】：Angular display title of selected component

【发布时间】：2018-12-19 13:07:09

【问题描述】：

我的问题很简单。

在router-outlet 中显示我的页面，例如/contact、/home 或/meetus

（如何）在title 中显示活动组件的名称？

这甚至可能吗，还是我必须在每个组件中移动我的标题栏？

【参考方案1】：

您可以创建一个AppService 来保存应用程序title 并将其作为可观察对象提供（使用访问器方法，例如get 和set）。

@Injectable()
export class AppService 
  private title = new BehaviorSubject<String>('App title');
  private title$ = this.title.asObservable();

  constructor() 

  setTitle(title: String) 
    this.title.next(title);
  

  getTitle(): Observable<String> 
    return this.title$;
  

然后在一个将保存（并显示）title 的组件（比如说AppComponent）中，订阅appService#getTitle() 方法并相应地更新title 属性。

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
  title: String;

  constructor(private appService: AppService)  

  ngOnInit() 
    this.appService.getTitle().subscribe(appTitle => this.title = appTitle);
  

现在在每个component 中注入AppService（当需要更新标题时）并调用appService#setTitle()。例如，hello 组件：

@Component(
  selector: 'hello',
  template: `<p><b>Hello</b> component content</p>`,
  styles: []
)
export class HelloComponent  
  
  constructor(private appService: AppService)  

  ngOnInit() 
    this.appService.setTitle('Hello Component');
  

查看此Working Demo（使用 Angular 6 测试）

【讨论】：

感谢您的完美回答。还缺少一件事，即在 app.module.ts providers: [AppService]

中注册提供程序

@imdadhusen 感谢您的反馈 :) 很高兴它对您有所帮助。你提到的那段代码在StackBlitz Demo

你是正确的代码已经在那里，但你只是在解释中错过了提及。

角度 11 不起作用 错误错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。

【参考方案2】：

您可以使用 Angular titleService 在标题组件中显示页面标题，如下所示：

头组件.ts:

export class AppComponent 
  public constructor(private titleService: Title )  

头组件.html：

<div class="title-bar">
    titleService.getTitle()
</div>

然后在任何组件中，您都可以使用 Angular titleService 设置页面标题，它会在标题和标题部分中自动更改：

export class AppComponent implements OnInit  
  public constructor(private titleService: Title )  

  ngOnInit() 
    this.titleService.setTitle("Component's title");
  

【讨论】：

感谢这就像一个冠军！是否可以将我的浏览器标题与此标题不同？

可以根据浏览器标题在页眉中显示某个标题。例如将浏览器标题设置为“联系”，如果浏览器标题为“联系”，则使用标题服务检查标题组件，然后在标题标题中显示“联系我们”。

还可以创建一个浏览器标题数组作为键，标题标题作为值，并在不使用if的情况下显示当前浏览器标题的相应标题。

@AliRida an alternative would be to use observables 以便仅在标题更改时收到通知。

这是真的@lealceldeiro，有很多解决方案，这取决于需求和项目结构。

【参考方案3】：

你可以：

创建一个新组件，将其命名为header，并将其放置在您的页面中。该组件将负责显示标题/您喜欢的任何标题

当有人进入特定组件时，使用服务并更新title 变量

【参考方案4】：

您可以使用ComponentFactoryResolver

constructor(private resolver: ComponentFactoryResolver) 

onActivated(component) 
  this.activeSelector =    
  this.resolver.resolveComponentFactory(component.constructor).selector;    

在模板上，

<router-outlet (activate)="onActivated($event)"></router-outlet>

STACKBLITZ DEMO

【讨论】：

除了选择器之外，我可以使用任何东西吗？所以加个名字什么的？

是的，它只是一个变量名

究竟如何使用变量？当我在组件中创建变量标题时，this.resolver.resolveComponentFactory(component.constructor).title 不起作用。对于 Angular 的新手问题，我很抱歉。

你不能这样做，它只是获取你在组件中使用的选择器的名称，如果你想共享一个变量，你应该实现另一个答案中提到的服务