wordpress CMS主题 微信
Home > JS应用 > angular6.0使用教程:创建自定义组件

angular6.0使用教程:创建自定义组件

高时银博客 JS应用 点击: 94 次 0 1
  • 标签:
  • 我们已经在电脑上安装好了angular6.0,并且也通过angular6.0创建了一个demo1的项目。接下来,我们就要针对这个demo1项目进行相应的开发。本章,我们来给项目新建几个component组件。

    创建一个自定义组件,其实很简单,进入命令行工具,再进入到demo1目录,输入以下命令:

    ng  g  component  home   创建一个名为home的组件。

    创建完后,会自动在app目录下生成1个home目录,home目录下会生成4个文件,如下图:

    angular6.0使用教程:创建自定义组件

    上图中,home.component.css是这个组件的css样式文件,home.component.html是该组件的html文件,home.component.ts是该组件的JS文件。同时,home组件创建完成后,会自动在app.module.ts主模块中导入这个home组件,如下图:

    angular6.0使用教程:创建自定义组件

    在 Angular 中,是使用 Component 装饰器来定义组件的元信息,如下图:

    angular6.0使用教程:创建自定义组件

    selector:'app-home':用于定义组件在HTML代码中匹配的标签,这样,我们可以在其它组件中通过<app-home></app-home>来调用这个组件。

    templateUrl:'./home.component.html':定义组件内嵌视图。

    styleUrls:['./home.component.css']:定义了组件css样式文件。

    export class HomeComponent implements OnInit {}:定义组件类。组件需要实现的功能,都在这个区域书写。

    组件创建好后,我们就可以给这个组件添加我们所需要的功能了。

     


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201806015622.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论