zoukankan      html  css  js  c++  java
  • 4-5 组件嵌套和投影组件(1)



    在我们的根组件当中,已经把子组件嵌套进来了。根组件作为父组件。然后其他的组件做为子组件。

    父组件通过input来给子组件设置属性的绑定
    子组件通过output对外声明的以事件的形式,把我想要传达给父组件的内容告诉父组件,父组件在对应的模板中,就去监听,像下面这种小括号的形式。
    父组件通过监听子组件的事件进行交互。


    如果我们在组件内,再嵌套一个组件,那么就是孙组件,
    孙组件的属性通过子组件去设置。但是子组件设置的这个属性又是父组件传递过来的。output也是同样的道理。孙组件output给子组件,子组件又穿给父组件去监听这个孙组件的事件。这样就造成了事件的冗余。那么我们怎么来解决这种事件的冗余呢?

    服务可以在各个组件中共享信息。

    投影组件

    简单的来说就是动态内容。

    大部分情况下组件的模板是固化的

    select可以不加

    select用来限制添加的内容

    适用于动态内容和容器性的组件。


    比如频道这一栏,它其实就是一个容器。


    把这里的内容拿出来,里面就只写ng-content

    把我们拿出来的内容这样放进组件。

    把ts的内容也复制出来

    复制到这里

    主要要导入channel



    设置over-flow


    在ng-content内单独加一个div节点

    div设置背景色为红色






    这里都改成div

    用上select

    我们加的红色背景的div就没显示了

    不光可以选择标签,还可以选择样式类


    然后把之类的style去掉

    选择器 只显示.class为special的



    把下面div的指令去掉

    中括号,指令,这样就只选择有这个指令appGridItem的




    可以加多个ng-content里面不同的指令




    ngContent和通常意义的组件的区别。
     

    结束

  • 相关阅读:
    Google开源单元測试框架Google Test:VS2012 配置
    ubuntu16.04 uninstall cuda 9.0 completely and install 8.0 instead
    ubuntu 16.04 安装cuda的方法
    ubuntu垃圾文件清理方法
    行人检测资源(下)代码数据
    行人检测资源(上)综述文献
    开源深度学习架构Caffe
    python pip 安装库文件报错:pip install ImportError: No module named _internal
    Canny算子
    vmware中nat模式中使用静态ip后无法上网的问题
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/13567824.html
Copyright © 2011-2022 走看看