Question

在AngularJS（1.x）中，我们如何创建一个可重用的窗口小部件（组件），其中包含其他窗口小部件（组件）的插入点（插槽）？

想象一下，我们有一个名为“verticalsplitter”的组件/指令。它的目的是将屏幕区域划分为“顶部”和“底部”区域（可能允许用户调整大小，折叠等）。

现在假设我们有许多其他丰富的组件，例如富文本视图，树视图，视频播放器和网格视图。

一个页面/视图1我想要一个verticalCElitter，其顶部是richtextview，底部是treeview。在页面/视图2上我想要一个verticalsplitter，顶部有一个videoplayer，底部有一个gridview。

第1页

<html>
<body>
    <verticalsplitter>
        <top ng-initialSize="30%">
            <richtextview />
        </top>
        <bottom ng-initialSize="70%">
            <treeview  />
        </bottom>
    </verticalsplitter>
</body>
</html>

第2页

<html>
<body>
    <verticalsplitter ng-locked="true">
        <top>
            <videoplayer />
        </top>
        <bottom>
            <gridview  />
        </bottom>
    </verticalsplitter>
</body>
</html>

我怎样才能做到这一点？如果组件不可能（我需要使用指令进行转换），那就没关系。

Answer 1

组件可以转录。在AngularJS Developers Guide for Components：

中明确说明了这一点

app.component("verticlesplitter", {
    transclude: {
        'topPart': 'top',
        'bottomPart': 'bottom'
    },
    template: `
          <div style="border: 1px solid black;">
              <div class="top" ng-transclude="topPart"></div>
              <div>Something in the middle</div>
              <div class="bottom" ng-transclude="bottomPart"></div>
          </div>
    `
});

有关详细信息，请参阅

如何在AngularJS中定义可组合组件

1 个答案: