• 2-6 【组件封装】分离封装第一个组件






    index.ts内列出来当前目录里面,我想对外暴露的一些东西。好处是1,缩短文件名的导入,2是格力内部变化对外部的影响。

    生成组件测试


    会给我们生成四个文件

    还去更新了一个文件


    看一下做了哪些改动。点击这里,这是VSCode里面git的标签。

    改动1

    可以对文件历史进行对比

    自己模块本身提供的组件,放在declarations的数组当前去


    改动2


    驼峰的写法,生成后变成横线的形式了。

    每个大写字母用横线做分隔,然后字母变成小写


    组件名还是驼峰的形式,但是文件名用用驼峰分隔并用横线分隔开。


    这是生成的测试文件

    实际上是生成了一个目录把组件都放在这个目录里面。


    如果想把所有的组件都放在components的文件夹中的话。app的目录下新建文件夹components

    当然也可以直接拖进这个components的文件夹内。我们先删除,用命令行的形式来演示创建组件到components文件夹内。




    迁移代码

    app.components.css内的代码复制到新创建的scrollableTab的组件的css文件内。




    html的代码也复制过来。


    ts内的代码也复制过去。

    app主组件内引用子组件



    在app的组件内引用这个组件。用它的selector

    浏览器预览效果

    index.ts

    组件内创建index.ts文件


    文件内只进行导出。

    components文件夹下index.ts


    每一层目录下都要创建index,ts


    只引用到了scrollable-tab的目录。

    scrollable-tab到了这个目录级别,他就会自动去找这个目录下的index.ts

    app.modules.ts内的引用

    组件的引用也只只需要引用到components这层目录就可以了。



    最终效果还是没有改变



     

    结束

  • 相关阅读:
    布隆过滤器
    string.ToString("X")的含义,转换为16进制
    Stream.Write()和Stream.Read(), Stream.Flush的作用,待学习
    linux查看CPU,内存使用情况
    HttpContext.Current.Request.InputStream
    程序员常去的10个顶级开发社区
    JavaScript 对象初探
    PHP – 架構設計 Data Access Layer 篇
    如何用 JavaScript 动态呼叫函数
    PHP – EasyUI DataGrid 资料存的方式
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/11764909.html
Copyright © 2020-2023  润新知