Angular2 模块化视图

Question

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

是否有关于此主题的可用资源？

-

更新

当我点击一个菜单项转到我的应用程序中的另一个页面时。例如，从 'home' 到 'manage products'。我想显示 'Manage products' 上下文，但不重新加载菜单（以及不需要重新加载的其他组件）

Answer 1

Angular2 路由功能允许您link查看特定路径。这可以为特定组件定义。 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 模块化视图

Angular2 modular view

modularity

angular2-template

angular