Question

如何使用Angular2创建模块化视图？当我点击菜单项时，我想更新容器并离开我的菜单，只需更新一些类。我怎样才能做到这一点？

此主题可用的所有资源？

-

更新

当我点击菜单项以转到我的应用中的其他页面时。例如，从“家”转到“管理产品”。我想显示“管理产品”上下文，但不重新加载菜单（以及其他不需要重新加载的组件）

Answer 1

Angular2路由功能允许您将视图链接到特定路径。这可以为特定组件定义。 RouterOutlet指令对应于Angular动态填充与路径关联的组件的占位符。

这意味着周围的元素可以保持不变。

以下是一个示例：

@Component({
  selector: 'my-app',
  template: `
    <!-- The menu block -->
    <div>
      My menu
    </div>

    <!-- The dynamic content area -->
    <router-outlet></router-outlet>
  `,
  directives: [ ROUTER_DIRECTIVES ]
})
@RouteConfig([
  { path: '/products', component: ProductListComponent, name: 'Products' }
  { path: '/products/:id', component: ProductDetailsComponent, name: 'Product'}
])
export class AppComponent {
  (...)
}

希望它可以帮到你，亨利

Angular2模块化视图

1 个答案: