angular2 导航栏组件注入

Question

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

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

我正在尝试使用非高级 Angular 尽可能简单地做到这一点。

不幸的是，我无法将多个不同组件的选择器设置为相同的值，或者在 html 中包含两个而不是一个属性，而不会出现“模板解析错误”。此外，我也无法在主 html 中包含例如两个跨度标签，每个标签都包含不同模块的选择器属性，用于 Bootstrap css 中断并创建多行导航栏。再次在这里，我想尽可能接近原生 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 -->

Answer 1

如果你使用组件而不是属性指令，我认为你可以实现你想要做的事情：

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

然后只需更改您的选择器：

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() {
  }

}

和：

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() {
  }

}