• Angular2中的组件

    Angular2中的组件

    Angular 中的组件 - 图1

    任何Angular 2应用程序的核心理念是组件。实际上,整个应用程序可以被建模为这些组件的树。

    这是Angular 2团队定义组件的方式:

    组件控制一个屏幕空间的补丁,我们可以调用视图,并为应用程序声明可重用的UI构建块。

    基本上,组件是最终用户可见的任何东西,并且可以在应用程序中重复使用多次。

    在Angular1.x中,我们有路由器视图和指令,其工作类似于组件。指令组件的想法变得相当受欢迎。它们是通过使用控制器的指令创建的,同时依赖于controllerAs和bindToController属性。例如:

    1. angular.module('ngcourse')
    2. .directive('ngcHelloComponent', () => ({
    3. restrict: 'E',
    4. scope: { name: '=' },
    5. template: '<span>Hello, {{ ctrl.name }}.</span>',
    6. controller: MyComponentCtrl,
    7. controllerAs: 'ctrl',
    8. bindToController: true
    9. })
    10. );

    事实上,这个概念变得如此受欢迎,在Angular 1.5中,.component方法被引入作为语法糖。

    1. angular.module('ngcourse')
    2. .component('ngcHelloComponent', {
    3. bindings: { name: '=' },
    4. template: '<span>Hello, {{ $ctrl.name }}.</span>',
    5. controller: MyComponentCtrl
    6. });