Angular2 导航栏组件注入

问：

我正在使用 Angular 2 创建一个演示 Web 应用程序。

此应用程序由带有导航栏的主页和（目前）带有该导航栏组件的 2 个模块组成。因此，每个模块都应该在主屏幕的导航栏上显示其按钮。

我试图使用非高级 Angular 使其尽可能简单。

不幸的是，我无法将多个不同组件的选择器设置为相同的值，或者在 html 中包含不是一个而是两个属性而不会出现“模板解析错误”。此外，我也无法在主 html 中包含两个 span-tags，每个标签都包含 Bootstrap css 中断和创建多行导航栏的不同模块的 selector 属性。同样，在这里，我想尽可能接近原生 Bootstrap。

所以我的问题基本上是如何创建 Bootstrap 导航栏并从不同的组件/模块“注入”导航栏项（按钮、搜索栏等）？

模块 1：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: '[ticket-navbar]',
  templateUrl: 'ticket.component.html',
  styleUrls: ['ticket.component.css']
})

export class TicketComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

模块 2：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: '[user-navbar]',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})

export class UserComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

主页中的 html，其中应显示包含模块中的导航栏项：

    <!-- navbar menu items -->
    <div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav navbar-right list-inline" ticket-navbar user-navbar>
        </ul>
    </div>
    <!-- navbar menu items -->