所选组件的 Angular 显示标题

Question

我的问题很简单。

在router-outlet中，我显示我的页面，例如/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您注入(inject)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 测试)