如何将 parent 标题更改为 Angular 中 child 的值？

Question

我正在寻找可以在 parent 组件中动态切换（取决于我们所在的组件）值的解决方案。每个组件的值应该不同。

这样的解决方案服务是不是太过分了？ Angular有没有更简单的解决方案？

Parent - 一些文字 {{ title }}

Child1 - title = "title one" Child2 - title = "标题二"

等等

Answer 1

尝试使用 EventEmitter:

child-component.ts

import { Output, EventEmitter } from '@angular/core'; 
title: string;
@Output() titleChange: EventEmitter<any> = new EventEmitter();

ngOnInit() {
  this.title = 'child title';
  this.titleChange.emit(this.title);
}

parent-component.html

<p>{{title}}</p>
<app-child (titleChange)="onTitleChange($event)"></app-child>

parent-component.ts

title: string

onTitleChange(value: string) {
   this.title = value;
}

Answer 2

您在使用 RoutingModule 吗？如果是，您可以在路由定义中添加一个 data 属性（即标题），然后在 parent 组件中订阅路由更改。

例如像这样：https://whosebug.com/a/58863966/3073719

如何将 parent 标题更改为 Angular 中 child 的值？

How to change the parent title to the value from the child in Angular?

parent

angular