选定组件的角度显示标题答案

【问题标题】：Angular display title of selected component选定组件的角度显示标题
【发布时间】：2018-12-19 13:07:09
【问题描述】：

我的问题很简单。

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

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

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

【问题讨论】：

标签： angular typescript components 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 的新手问题，我很抱歉。
你不能这样做，它只是获取你在组件中使用的选择器的名称，如果你想共享一个变量，你应该实现另一个答案中提到的服务