Angular组件样式指南

Angular component styleguide

本文关键字：样式 组件 Angular      更新时间：2023-09-26

我使用angular-js-styleguide-snippets作为Atom，当我在编辑器上输入ngcomponent时，扩展成以下结构:

( function() {
    'use strict';
    angular
        .module( 'arroyo' )
        .component( 'intro', component );
    /* @ngInject */
    function component() {
        var settings = {
            template: '<h1>test</h1>',
            controller: Controller,
        };
        return settings;
    }
    Controller.$inject = [];
    /* @ngInject */
    function Controller() {
    }
} )();

然而，使用上面的代码似乎不起作用。虽然没有控制台错误，但组件本身(<intro></intro>)不呈现任何内容。经过一番摆弄，我发现使用下面的代码如预期的那样工作:

( function() {
    'use strict';
    angular
        .module( 'arroyo' )
        .component( 'intro', {
            template: '<h1>test</h1>'
        } );
} )();

第一个代码片段有什么问题?

你必须像这样调用函数组件:

angular
    .module( 'arroyo' )
    .component( 'intro', component());

new component方法实际上接受一个对象，通过调用返回该对象的函数来提供设置。

查看文档获取更多信息

相关文章：