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和通常意义的组件的区别。
 

结束

 

posted @ 2020-08-26 21:05  高山-景行  阅读(149)  评论(0编辑  收藏  举报