angular - Angular2模块化视图

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 {
  (...)
}

希望它可以帮助你，蒂埃里