• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:创建自定义组件

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

    作者: 分类:angular开发 点击: 1,144 次
    wordpress CMS主题:ssmay主题

      我们已经在电脑上安装好了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 {}:定义组件类。组件需要实现的功能,都在这个区域书写。

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

       



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    2条回应:“angular6.0使用教程:创建自定义组件”

    1. lch说道:

      赚积分,新注册用户应该多送点积分

    2. lch说道:

      正在学习ANGULAR6,这里的教程不错

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.