带有角度 ui-router 的 md-tabs 不呈现孙子 [英] md-tabs with angular ui-router not rendering grandchildren

问题描述

我正在使用 Angular 1.6.2 和 Angular Material 1.3，并大量使用组件.我有一个外部appComponent"，它包装了应用程序的其余部分，并提供了一个带有导航的标题工具栏、一个页脚，然后我的顶级应用程序组件在应用程序组件内的 ui 视图中加载.

我的一个组件是客户维护页面，它在选项卡 1 的选项卡中有一个列表，然后在选项卡 2 上有客户特定的详细信息.

tab 2 通过 ng-include 加载另一个包含多个选项卡的模板.其中一些选项卡包含子数据，我想延迟加载它们，所以我像这样为它们创建状态:

 .state('客户', {网址:/客户"，templateUrl: "components/customer/index.html",角色:客户"，解决:{认证:认证}}).state('customers.customer', {url: "/{customerId}",templateUrl: "components/customer/index.html",角色:客户 - 编辑"，查看:客户详细信息"，}).state('customers.customer.acknowledgements', {网址:/致谢"，templateUrl: "components/customer/customerAcknowledgements.html",视图:客户致谢"，onEnter:函数(){调试器}}).state('customers.customer.importinstructions', {url: "/importinstructions",templateUrl: "components/customer/customerImportInstructions.html",角色:客户 - 编辑"，视图:客户进口说明"，}).state('customers.customer.orderhistory', {网址:/订单历史"，templateUrl: "components/customer/customerOrderHistory.html",//父解析被继承.不执行视图:客户订单历史"，})

html 包含 ui-view 和每个视图的 name 参数，如下所示:

 <md-tab label="一般信息"><!-- 为了简洁起见删除了内容--></md-tab><md-tab><md-tab-label><span ui-sref="customers.customer.acknowledgements">致谢</span></md-tab-label><md-tab-body><div ui-view name="customeracknowledgements"></div><!--<div ui-view></div>--></md-tab-body></md-tab><md-tab layout-fill ui-sref="customers.customer.importinstructions" label="导入说明" md-on-select="$ctrl.selectTab('customers.customer.importinstructions')"><md-tab-body><div ui-view name="customerImportInstructions"></div></md-tab-body></md-tab><md-tab label="订单历史记录" ui-sref="customers.customer.orderhistory" md-on-select="$ctrl.selectTab('customers.customer.orderhistory')"><md-tab-body><div ui-view=name "customerOrderHistory">

</md-tab-body></md-tab></md-tabs>

我尝试了各种各样的东西.我知道这些状态也在被导航，因为我已经在每个状态的 customeracknowledgements 状态上使用了 onEnter 函数，并且它为每个状态触发.此外，如果我在 Chrome 开发人员工具中查看网络选项卡，则会在导航到包含选项卡时进行 XHR 调用以检索每个模板，但任何选项卡上均未显示任何内容.

我在谷歌上搜索了 *#%！为此，阅读并尝试了我能找到的所有内容，但没有任何帮助.任何想法，将不胜感激.

解决方案

我能够通过像这样更改视图语法来使其工作:

 .state('customers.customer.acknowledgements', {网址:/致谢"，角色:客户 - 编辑"，意见:{客户致谢":{ templateUrl: "components/customer/customerAcknowledgements.html" } },})

让模板在选项卡正文中加载并保留所有动画效果的最简单的方法似乎是:

 <md-tab-body><div ui-view name="customeracknowledgements"></div></md-tab-body></md-tab>

I am using Angular 1.6.2 with Angular Material 1.3 and making fairly heavy use of components. I have an outer "appComponent" that wraps the rest of the app and provides a header toolbar with navigation, a footer and then my top-level app components load within a ui-view inside the app component.

One of my components is a customer maintenance page that has a list in a tab on tab 1 and then customer specific details on tab 2.

tab 2 loads another template via ng-include that includes several tabs. A few of those tabs contain child data and I want to lazy load them, so I create states for them like this:

 .state('customers', {
                url: "/customers",
                templateUrl: "components/customer/index.html",
                role: "customers",
                resolve: { authenticate: authenticate }
            })
            .state('customers.customer', {
                url: "/{customerId}",
                templateUrl: "components/customer/index.html",
                role: "customers - edit",
                view: "customerdetail",
            })
            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                templateUrl: "components/customer/customerAcknowledgements.html",
                view: "customeracknowledgements",
                onEnter: function() {
                    debugger
                }
            })
            .state('customers.customer.importinstructions', {
                url: "/importinstructions",
                templateUrl: "components/customer/customerImportInstructions.html",
                role: "customers - edit",
                view: "customerImportInstructions",
            })
            .state('customers.customer.orderhistory', {
                url: "/orderhistory",
                templateUrl: "components/customer/customerOrderHistory.html",
                // parent resolve is inherited. Not implementing
                view: "customerOrderHistory",
            })

The html inlcudes ui-view with the name argument for each view like so:

        <md-tabs md-dynamic-height class="md-primary" md-no-select-click md-selected="selectedTab">
            <md-tab label="General Info">
                <!-- content removed for the sake of brevity -->
            </md-tab>
            <md-tab>
                <md-tab-label><span ui-sref="customers.customer.acknowledgements">Acknowledgements</span></md-tab-label>
                <md-tab-body>
                    <div ui-view name="customeracknowledgements"></div>
                    <!--<div ui-view></div>-->
                </md-tab-body>
            </md-tab>
            <md-tab layout-fill ui-sref="customers.customer.importinstructions" label="Import Instructions" md-on-select="$ctrl.selectTab('customers.customer.importinstructions')">
                <md-tab-body>
                    <div ui-view name="customerImportInstructions"></div>
                </md-tab-body>
            </md-tab>
            <md-tab label="Order History" ui-sref="customers.customer.orderhistory" md-on-select="$ctrl.selectTab('customers.customer.orderhistory')">
                <md-tab-body>
                    <div ui-view=n ame "customerOrderHistory">
                    </div>
                </md-tab-body>
            </md-tab>
        </md-tabs>

I have tried a wide variety of things. I know that the states are being navigated too because I've had the onEnter function used on the customeracknowledgements state on each state and it fires for each one. Also if I watch the network tab in the Chrome developer tools an XHR call is made to retrieve each template when I navigate to the containing tab, but nothing is display on any of the tabs.

I've googled the *#%! out of this, read and tried everything I can find, but nothing has helped. Any ideas would be appreciated.

解决方案

I was able to get this working by changing the view syntax like this:

            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                role: "customers - edit",
                views: { "customeracknowledgements": 
                    { templateUrl: "components/customer/customerAcknowledgements.html" } },
            })

and the least verbose way to get the templates to load within the tab bodies and keep all of the animation effects appears to be:

            <md-tab label="Acknowledgements" ui-sref="customers.customer.acknowledgements">
                <md-tab-body>
                    <div ui-view name="customeracknowledgements"></div>
                </md-tab-body>
            </md-tab>

这篇关于带有角度 ui-router 的 md-tabs 不呈现孙子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！