如何动态使用angularjs ng-outlet答案

【问题标题】：How to use angularjs ng-outlet dynamically如何动态使用angularjs ng-outlet
【发布时间】：2015-08-22 17:49:18
【问题描述】：

从几天开始，我正在开发 angularjs 应用程序。经过 2 天的头脑风暴，我现在知道如何使用 angularjs 的新路由器+组件+ng-outlet 的东西。

现在，在幸福片刻之后，又出现了一个奇怪的问题。那就是-在我的应用程序中，主要有两种页面。

登陆页面（我只需要 1 个 ng-outlet）
其他页面（我需要 3 ng-outlet。就像顶部导航栏、侧边栏和主要内容区域。见下面的截图）

所以我想要的是，当用户从登录页面移动到其他页面时，我如何在 index.html 文件中动态创建 3 ng-outlet。这样，我就可以填充顶部导航栏组件、侧边栏组件和主要内容区域。

任何线索，如何处理这种情况？

感谢和问候

index.html 代码

<body layout="column" ng-controller="AppCtrl">    
    <div ng-outlet="navigation" id="navigation">
    </div>


    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <div ng-outlet="sidebar">
            </div>  
        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div ng-outlet="main">
                </div>
            </md-content>
        </div>
    </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>

    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="assets/js/router.es5.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
</body>

【问题讨论】：

你的主要组件本质上是根组件吗？

标签： javascript angularjs components router

【解决方案1】：

我遇到了同样的问题，我的解决方法是创建一个 void 组件，带有一个空控制器和这个 template: "<div style='display:hidden;'></div>"

所以，每当我想让一个组件“消失”时，我都会为它分配 void 组件，如下所示：

function appController($router) {
    $router.config([
        { path: '/', redirectTo: '/splash' },
        { path: '/splash', components: { left: 'void', main: 'splash' } },
        { path: '/left', components: { main: 'splash', left: 'left' } }
    ]);
}

希望对你有帮助，雷纳托

【讨论】：

您的解决方案看起来不错。但是我正在使用 Angular Material design(material.angularjs.org/latest/#) 并且每当我尝试实现您的技术材料设计 CSS 时都无法正常工作。上面我已经包含了我的 index.html 代码。为了实现您的技术，所有材料设计代码都应该在“ng-outlet”内，如果我这样做，所有材料设计的 CSS 都不起作用。
是的，我在使用 angular-material 时遇到了同样的问题。是的，我将该内容移到了组件的模板中。然而，即使您可以在路由定义中使用 null 或 undefined 来指定其可见性。你最终会得到 ng-outlet “隐藏”，所以问题仍然存在。我从你的代码中看到你正在实现一个 md-sidenav，考虑到 sidenav 它本身是一个组件，所以拥有它是有意义的，将 md-sidnav 移动到组件模板。
根据 Pete Bacon 的说法，这在当前的 ngComponentRouter 中不可用。