我創建使用角2.angular2導航欄組分注射
本申請一個演示的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 -->
是導航欄的每個模塊中的一樣嗎? – Bean0341
只有主應用程序包含一個導航欄。每個模塊都包含它應該注入的導航菜單項。 –