Question

我只是尝试使用UI路由器1.0.0为角度1.5.9设置样板。我可以在ui-view中显示我的父状态组件，但是当我在父系中嵌套状态时，我的组件没有被注入我的ui-view。

这是我的index.html

<body ng-app="app">
 <ui-view></ui-view>
</body>

这是主要成分

<div class="main-container">
  <banner></banner>
  <div ui-view='ui-view></div>
</div>

正是在这一点上，我无法向ui-view注入任何东西。

这是我的javascript文件

$stateProvider
    .state('app', {
      url: '/',
      component: 'main'
    })
    .state('app.login', {
      url: '/login',
      views: {
        'ui-view': {
          templateUrl: './app/login/login.html'
        }
      }
    });

我不确定我做错了什么，对正确道路的任何帮助/指示都会受到赞赏。

修改

可能有帮助的其他信息

当我将登录作为父状态引用时，一切都按预期工作。
登录组件是我在主模块中包含的单独模块的一部分。

Answer 1

为了在每个父组件中嵌套一个子状态，不需要像通过添加＆＃34; ui-view＆＃34;的值那样使用命名视图。对于主组件模板中使用的ui-view指令。只有当您想要处理多个ui-view时，才需要这些命名视图。然后你需要按名称引用它们。

在您的示例中，您将看不到任何内容，因为您也没有正确定位命名视图。如果在不是根文件的模板中定义了命名视图，则有一些关于如何处理这些命名视图的规则。在这种情况下，您需要通过引用带有＆＃34; ui-view-name @ state＆＃34;的ui-view来更具体。语法意味着＆＃34; ui-view @ app＆＃34;在你的情况下。

但正如已经提到的：在您的简单情况下，只需省略ui-view的名称，并使用普通模板（或组件引用）替换状态配置中的views部分。

.state('app.login', {
  url: '/login',
  templateUrl: './app/login/login.html'
});

有关嵌套视图的详细信息，请查看ui-router docs中的优秀示例应用。

Answer 2

所以这个真的很奇怪，我没有解释为什么它按照它的方式工作。我所做的就是将javascript文件更改为下面的文件

$stateProvider
    .state('login', {
      url: '/login',
      component: 'main'
    })
    .state('login.default', {
      url: '/default',
      component: 'login'
    });

而不是我的父母有'/'，而是将其更改为'/ login'。我很想知道是否有人知道这种行为背后的原因。

Answer 3

$stateProvider
    .state('app', {
      url: '/',
      templateUrl: path/to/main_component.html
    })
    .state('app.login', {
      url: '/login',
      views: {
        'ui-view': {
          templateUrl: './app/login/login.html'
        }
      }
    });

当您处于app.login视图（状态）ui-view时，将在其父状态模板中进行检查。如果您没有模板，则不知道在哪里呈现。

'ui-view':{}的目标是其父视图。 'ui-view@':{}的目标是index.html

的根组件

组件没有注入我的ui-view

3 个答案: