Angular 4 Sidebar

Question

我正在嘗試使用Angular創建一個側欄，並且我可以找到的唯一一個是由arkon提供的ng-sidebar：https://github.com/arkon/ng-sidebar。安裝後的日誌輸出是：

+-- UNMET PEER DEPENDENCY @angular/core@4.3.6  
+-- UNMET PEER DEPENDENCY @angular/http@4.3.6  
`-- ng-sidebar@6.0.1  

在我看來，我的Angular版本與此組件不兼容。我嘗試刪除我的node_modules，清除緩存，並重新安裝，像其他人一樣，但它不適合我。有沒有其他的解決方案，還是有更好的或替代的方式來實現側邊欄？

在相關說明中，我也看到以下2條警告，但我認爲它並不影響任何內容。我應該對這些警告做些什麼嗎？

npm WARN angular2-jwt@0.1.28 requires a peer of @angular/core@^2.0.0 but none was installed. 
npm WARN angular2-jwt@0.1.28 requires a peer of @angular/http@^2.0.0 but none was installed. 

--------------------下面的「ng -v」的結果--------------- -------------

@angular/cli: 1.3.2  
node: 6.11.0  
os: win32 x64  
@angular/animations: 4.3.6  
@angular/common: 4.3.6 
@angular/compiler: 4.3.6 
@angular/compiler-cli: 4.3.6 
@angular/core: 4.3.6 
@angular/forms: 4.3.6 
@angular/http: 4.3.6 
@angular/platform-browser: 4.3.6 
@angular/platform-browser-dynamic: 4.3.6 
@angular/platform-server: 4.3.6 
@angular/router: 4.3.6 
@angular/cli: 1.3.2 

Answer 1

您有幾種選擇在這裏：

1. 材質設計。他們有一個sidenav可能會爲你工作（https://material.angular.io/components/sidenav/overview）。

2. bootstrap。您可以在主div中製作col-md-1（或任何您想要的尺寸）。

3. 使那個過時的lib工作。更可能的是，您可能會忽略警告，但如果它不起作用，我相信回購所有者會很樂意爲您做出貢獻。

4. 寫你自己的。這可能是你最好的選擇，因爲你可以學習一些關於角度和佈局的東西（不要假設你不知道，只是說我們都可以學習）。

對於編寫自己的，請考慮Flexbox或像引導程序使用的網格。然後，您可以考慮添加一個@Output()和EventEmitter以涵蓋諸如打開或切換操作之類的內容。

Answer 2

需要手動更新我的package.json依賴關係。我用'npm過時'驗證了新值。謝謝！