在 Angular 中声明视图时添加额外的 'views:'foo':' 的目的是啥？

Posted 2023-02-26

【中文标题】在 Angular 中声明视图时添加额外的 \'views:\'foo\':\' 的目的是啥？

【英文标题】：What's the purpose of adding the extra 'views:'foo':' when declaring a view in angular?在 Angular 中声明视图时添加额外的 'views:'foo':' 的目的是什么？

【发布时间】：2015-11-20 00:57:52

【问题描述】：

用views:例如声明a视图的目的是什么

.state('app.example', 
    url: "/example",
    views: 
      'my-example': 
        templateUrl: "views/example.html",
        controller: 'myCtrl'
      
    
  )

与此相反

 .state('app.example', 
        url: "/example"
        templateUrl: "views/example.html",
        controller: 'myCtrl'
        
      )

【参考方案1】：

它用于为单个状态提供多个并行视图。示例：

.state('app.example', 
    url: "/example",
    views: 
        "example1": 
            template: 'app.example.view1'
        ,
        "example2": 
            template: 'app.example.view2'
        
    
)

index.html

<ui-view = "view1">
</ui-view>

<ui-view = "view2">
</ui-view>

如此有效，您的状态有两个平行的视图。你可以找到详细解释here。

【讨论】：

好吧，这就是为什么它们被用于选项卡和侧视图/侧边菜单的原因。在处理多个并行视图的子状态时，这将如何工作（什么是最佳实践）？

抱歉，从未将嵌套状态用于并行视图。也许将此作为​​一个单独的问题？

【参考方案2】：

用于在单个页面（状态）上显示多个视图。当我们在单个页面上显示多个并行视图时，我们使用上述方法。假设您有一个页面，您必须在不同的位置显示不同的图表，我们创建了多个视图并在这些位置上附加了图表。希望这会有所帮助

【参考方案3】：

好的，我想通了，为此我创建了一个codepen 以使其很好地适应其他离子应用程序。这会在按下按钮或侧边菜单项时更新子视图，并通过使 多个 子视图共享这样的名称

，在 codepen 内提供更多详细信息

     views: 
            'shared-child-view' :
              templateUrl: "[path to your children, in our case child1.html and child2.html]"
            
          `

看起来像这样的地方

 .state('sidemenu.parent.child1', 
      url: "/child1",
      views: 
        'shared-child-view' :
          templateUrl: "child1.html"
        
      
    )
       .state('sidemenu.parent.child2', 
      url: "/child2",
      views: 
   'shared-child-view': 
     templateUrl: "child2.html"
   
 
    )
`

它可以位于像这样处于抽象状态的父级中（但它不是必须的，但很可能这就是您的 ionic 应用程序的设置方式）：

.state('sidemenu', 
  url: "/sidemenu",
  abstract: true,
  templateUrl: "sidemenu.html"
)
.state('sidemenu.parent', 
  url: "/parent",
  views: 
    'menuContent' :
      templateUrl: "parent.html"
    
  
)

您可以交替或更改视图中的每个子视图以使用相同名称的 evrey 视图，在本例中为“shared-child-state”

  <div ui-view name="shared-child-view"></div>

并且可以通过

使其

可点击

<a href="#/sidemenu/parent/child2" class="item">Child View 2
              </a>

如果您使用ui-serf，这将不起作用。

我希望这对某人有帮助！