angular2導航欄組分注射

Question

我創建使用角2.

本申請一個演示的web應用程序從具有導航欄的主頁和（現在）2個模塊與該導航欄的組件構成。所以每個模塊都應該在主屏幕的導航欄上顯示其按鈕。

我想盡可能簡單的使用非高級的Angular。

不幸的是，我無法將多個不同組件的選擇器設置爲相同的值，或者在html中不包括一個而是兩個屬性而沒有得到'模板解析錯誤'。此外，我也無法在主html中包含兩個span標籤，每個標籤都爲不同的Bootstrap css中斷模塊持有selector屬性，並創建一個多行導航欄。再次，我希望儘可能地接近本地Bootstrap。

所以我的問題基本上是如何去創建一個Bootstrap導航欄和從不同的組件/模塊'注入'navbar項目（按鈕，搜索欄等）？

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

}