完全不同的移動視圖

我有一個SPA，需要根據客戶端設備以兩種完全不同的方式顯示我的應用程序。完全不同的移動視圖

其中一個顯示了我家的平面佈局圖，用燈泡圖標打開/關閉我的燈（以及更多信息），使用等軸測投影在畫布上呈現。

另一個（主要用於移動）在簡單的列表/漢堡菜單中顯示與名稱相同的燈泡圖標。

我不想將設備類型限制爲我想要的視圖，但根據設備/選定視圖完全替換組件的最佳方式是什麼？

我應該創建兩個組件並將共享邏輯移動到服務/類嗎？或者我應該隱藏不需要的組件（我不想浪費資源渲染畫布或運行渲染所需的邏輯）

如果使用*ngIf或類似的，則表達式爲false時不會呈現任何內容[hidden]="..."導致HTML呈現。

無論如何，將邏輯運用到服務中是一種很好的做法。

您還可以根據視圖大小加載不同的路由器配置另請參閱New Angular2 router configuration。這樣你可以爲不同的視圖尺寸加載完全不同的組件。

（它看起來像這樣將在下一版本的例子加以改進，以只加載新的子路線的組成部分，也有討論提供一個API，允許添加/刪除單個路由）

2016-08-04 06:10:16

我都除了實際的等軸投影之外，服務中的邏輯已經不再需要列表和構建所需的對象。謝謝！ –

回答