Question

我今天早上升级到Angular2最终版本，并注意到我在之前发布的候选版本中使用的CSS样式不再有效。我需要从父级控制子元素的HTML元素。

这是我的HTML：

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

这是我的CSS：

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

.video-container是一个HTML元素。我想在父页面加载时设置视频容器的高度。这曾经在Angular2 RC 4和5中工作。安装Angular2最终版本后，今天停止工作。

有没有更合适的方法来解决这个问题？

Answer 1

谢谢Gunter和Clint。根据您的建议，以下是我解决此问题的方法（使用LESS生成CSS）：

@deep:  ~">>>";

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

直接使用@ {deep}：host会影响所有子节点，但将它放在子元素中只会影响该子节点（stm-video）中的样式。

Answer 2

我认为你在这里寻找的是/deep/。它通过子组件向下应用样式。在您的父样式中，您将拥有。

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

Answer 3

:host仍受支持。 ::shadow不受支持。据我所知，从来没有。 ::content被忽略。 <{1}}和/deep/是等效的，但仍受支持。

>>>

应该做你想做的事。

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

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

3 个答案: