Aurelia有條件地包裝組件中的插槽

Question

我正在創建包含material-components-web，cards specifically的Aurelia組件，現在想知道實現多個內容節（操作等）的正確方法是什麼。

插槽似乎是正確的選擇，但我不能只在任何時候將模板上的動作div，但只有在任何動作實際存在的情況下。

簡而言之，我需要檢查組件模板中是否定義了插槽。

<template> 
    <div class="card"> 
     <div class="content"> 
      <slot></slot> 
     </div> 

     <!-- somehow check here if the slot has been defined --> 
     <div class="actions"> 
      <slot name="actions"></slot> 
     </div> 
    </div> 
</template> 

Answer 1

外的開箱，有做這就像一個$slots特性沒有直接的方法，但你應該能夠通過模板控制器實例本身訪問插槽：au.controller.view.slots - 內的特定插槽這個數組有更多關於插槽本身及其子項的信息。

Here是帶模態組件（自定義模態元素）的Aurelia應用程序的一個示例。模式本身有一個插槽，可以將HTML投影到其中。我們有一個標題，正文和頁腳。

我們的自定義元素中的每個預定義的插槽應顯示在children對象內，其中屬性名稱是插槽的名稱。如果您沒有提供插槽名稱（默認插槽），則其名稱在內部爲：__au-default-slot-key__。

我們首先檢查插槽是否存在，然後檢查其子項的長度，children陣列存在於每個插槽內。如果某個插槽沒有投射HTML，則它的子級長度爲零。這是可靠的，因爲在插槽內定義的默認內容不會被放入children陣列中，只有投影的HTML可以。

你會看到正在開展工作的主要是內部的modal.html，但密切關注modal.js我們注入的自定義元素的元素的引用，然後使用au獲得包含我們的槽控制器訪問奧裏利亞實例本身。

這種方法有一個警告：您不能使用if.bind有條件地刪除您的自定義元素內的HTML。如果在包含插槽的DIV上使用if.bind，則實際上會刪除其插槽引用，因此無法檢查它。要解決這個問題，只需使用show.bind（就像我在我提供的運行示例中那樣）。