如何使用 Angular 制作合适的容器组件？

Posted 2023-02-23

【中文标题】如何使用 Angular 制作合适的容器组件？

【英文标题】：How to make proper container component using Angular?

【发布时间】：2016-12-24 09:57:25

【问题描述】：

在我从事的项目中，有“操作控件”列表，例如：

此控件的部分在 90% 的页面上是相同的。所以我正在考虑编写“操作控件”Component，所以我不会在每个页面上更改大小，如果需要的话，只需在Component 的模板中（所有这些col-xs-*），或者只是复制/分别为每个输入粘贴 html。

    <div class="row">
        <div class="col-xs-7 form-inline">
                <div class="col-xs-9">
                    <!-- Search input -->
                </div>
                <div class="col-xs-3">
                    <!-- Type select -->
                </div>
        </div>
        <div class="col-xs-5 form-inline right">
            <sort-by ng-model="sortBy" ng-change="setCurrentPage(1);" values="sortValues"></sort-by>
            &nbsp;&nbsp;&nbsp;
            <items-per-page ng-model="itemsPerPage" ng-change="setCurrentPage(1);"></items-per-page>
        </div>
    </div>

制作这样的“容器”组件是个好主意吗？是否有关于如何正确制作的教程（一些输入可能被隐藏，即列表很小并且不需要分页，每个占位符，标题通常都是唯一的，所以可能有很多变量要传递）？

这或多或少是架构问题，我没有这方面的经验，但在我看来，编写这样的组件的想法很好。如果我弄错了或者问题不够具体，请辩解。

【参考方案1】：

是的，将可重用代码转换为组件是个好主意。

是的，传递配置变量是您为每个用例定制它的方式。使用ng-show、ng-hide、ng-if、ng-switch、ng-class、ng-style 等...有很多方法可以实现模板中的选项。

当您有大量选项时，通常将它们作为一个对象传递。 （即config="foo: 'bar', baz: 'biz'" vs foo="bar" baz="biz"）。

【参考方案2】：

是的，这是个好主意：这就是指令（或组件，在新的 1.5x 实现中）的目的：以智能的方式在 HTML 中注入一些可重用的组件。

想想是否需要将变量绑定到“容器”：通过使用指令/组件，您将能够轻松且毫无痛苦地做到这一点。

或者，如果您的“容器”中不需要任何形式的逻辑，您可以使用带有模板的 ng-include 在您的页面中注入 html，如下所示：

<div ng-include"myContainer.html"></div>

在你的“templates.html”中的某个地方..

<script type="text/ng-template" id="myContainer.html">
  <!-- content -->
</script>

【参考方案3】：

您正在寻找的是 Angular 指令 (https://docs.angularjs.org/guide/directive)

【讨论】：

components 是 angular 2 版本的指令，也可用于 angular 1.5 以简化向 angular 2 的过渡

不，不是：他明确说明了组件，也就是指令的新形式

啊，抱歉，我不知道，我只使用 angular 1.x