Question

我有一个单页Angular 4.3.1应用程序，它使用<router-outlet>标记来呈现组件。

问题是组件是使用名为<ng-component>的封装元素呈现的（如果不存在选择器）。

所以问题是当我将不透明度应用于包装器时，子元素不受影响。看起来好像是因为包装器是一个自定义DOM元素。

这是一个例子

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <ng-component style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </ng-component>

  <div style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </div>
</body>

</html>

我正在使用Chrome版本59.0.3071.115，它现在似乎是最新版本。

此处还有一个屏幕截图，以防问题出现在我的最后：

我在IE11中测试了同样的东西，但不透明度很好。有其他人经历过这个吗？

更新

根据要求，这是我正在尝试使用Chrome的角度路由动画：

export const routerAnimation =
    trigger('routerAnimation', [
        transition(':enter', [

            // styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('0.3s', style({ opacity: 1 }))
        ]),
    ])

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [routerAnimation],
    host: { '[@routerAnimation]': '' }
})

Answer 1

您可以在<style></style>内嵌套<ng-component></ng-component>块。在你的情况下：

<style>
    ng-component > div {opacity: 0.2;}
</style>

以下是完整代码段：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <ng-component>
  
      <style>
        ng-component > div {opacity: 0.2;}
      </style>      
  
      <div>First Line</div>
      <div>Second Line</div>
      <div>Third Line</div>
  </ng-component>

  <div style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </div>
</body>

</html>

适用于我的Chrome版本（版本59.0.3071.115）

Answer 2

另一种方式，无需手动更改问题的正文标记。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
  $(function(){
     $('ng-component').each(function(){$(this).children().attr('style',$(this).attr('style'));});
   });
</script>
</head>
<body>
  <ng-component style="opacity: 0.2;">
    <div>First Line</div>
    <div>Second Line</div>
    <div>Third Line</div>
  </ng-component>
</body>
</html>

＆＃13;

我是按jQuery实施的，但如果您不想在项目中使用jQuery，则可以按JavaScript重写。

无法为动画添加路由器插座的不透明度[Chrome]

更新

2 个答案: