所选组件的角度显示标题

Question

我的问题很简单。

在路由器插座中，我显示我的页面，例如/ contact或/ home或/ meetus

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

是否有可能我必须将标题栏移动到每个组件中？

谢谢。

Answer 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

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

Answer 3

您可以：

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

2. 使用服务并在有人输入特定组件时更新title变量

Answer 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