Question

我正在创建一个可以改进我的新闻自动收报机指令的组件，您可以看到here。而不是像这样将有限数量的样式属性传递给指令：

<div class="tickerContainer myStyles">
  <div ticker [trigger]="'onClick'" [text]="myText" [speed]="15" [padding-right]="0" [size]="40"></div>
</div>

我宁愿将元素设置在使用它的组件的css旁边。基本上样式就像你应用程序中的任何其他元素一样：

示例：

@Component({
  selector: 'my-component',
  template: `
    <div class="my-component-class">
      <ticker-container>
        <ticker>{{displayText}}</ticker>
      </ticker-container>
    </div>
  `,
  styles: [`
    .my-component-class{
      width: 100%;
    }
    ticker-container{
      width: 50%;
    }
    ticker {
      font-size: 24px;
      padding: 4px 10px;
    }
  `]
})
export class MyComponent  {
  displayText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}

我遇到的问题是我可以通过<ticker>显示原始<ng-content>组件的样式，但我无法将样式应用于生成的元素（生成的重复元素为＆＃39） ;勾选第一个元素后面的内容）。我已尝试通过组件生成器并使用:host / ::shadow / >>>样式命令的各种配置。

如果我知道如何从其他元素复制所有样式，我可以解决这个问题。有没有办法做到这一点？

Answer 1

在ticker-container和ticker组件上，将ViewEncapsulation设置为none：

import { ViewEncapsulation } from '@angular/core';

@Component({
    selector: ticker-counter,
    ...
    encapsulation: ViewEncapsulation.None
})

这将告诉Angular不要将这些元素封装在Shadow DOM中，这样父类样式就可以渗透到它。

Angular2如何获取与特定元素

1 个答案: