Angular2最终版本不再支持：host :: shadow

今天早上我升级到了Angular2最终版本，并注意到我在以前版本的候选版本中使用的CSS样式不再有效。我需要控制从父级看一个子元素的HTML元素。Angular2最终版本不再支持：host :: shadow

这里是我的HTML：

<div id="intro"> 
     <stm-video [video]="PageData.WelcomeVideo"></stm-video> 
    </div>

这里是我的CSS：

:host ::shadow 
{ 
    stm-video 
    { 
     .video-container 
     { 
      height: 80vh; 
      width: inherit; 
     } 
    } 
}

。视频容器是内部的HTML元素。我想设置视频容器在父页面中加载时的高度。这用于在Angular2 RC 4和5中工作。安装完Angular2最终版后，立即停止工作。

有没有更合适的方法来处理这个问题？

来源

2016-09-16 Tom Schreck

:host仍然受支持。不支持 ::shadow。据我所知，它从来没有。 ::content被忽略。 /deep/和>>>是等同的，并且都支持。

:host >>> { 
    stm-video { 
    ...

应该做你想做的。

又见Custom Styling on <ng-content> in angular2 not working ?

来源

2016-09-16 04:54:05

我觉得你在找什么是/deep/。它通过子组件应用样式。在你的父母风格你会有。

/deep/ .video-container 
{ 
    height: 80vh; 
    width: inherit; 
}

来源

2016-09-16 02:53:47 Clint

是：主机不再支持Angular2最终版本？/deep /似乎不适用于LESS，尽管 –

@TomSchreck主机仍然可以工作。你可能需要使用'：host/deep /'来代替，我不确定你的帖子的措辞是否符合元素结构。 '/ deep /'从css中移除了吗？ – Clint

谢谢冈特和克林特。您的建议，这里是我来到了解决这个问题（使用更少的生成CSS）：

@deep: ~">>>"; 

:host 
{ 
    stm-video 
    { 
     @{deep} 
     { 
      .video-container 
      { 
       height: 80vh; 
       width: inherit; 
      } 
     } 
    } 
}

为@ {深}直属：主机会影响所有的子节点，但把它的子元素中只是影响该子节点（stm-video）中的样式。

来源

2016-09-16 14:14:46

Angular2最终版本不再支持：host :: shadow

回答

相关问题