Question

我在＆＃34;漂亮的选择＆＃34;组件，我想，一旦我有它运作良好，我会把它用于人们审查/使用（这是我必须弄清楚的另一件事）。我试图找出的一件事是，如果有人想要使用我的组件，我想让它们设计它，我怎么能这样做？

我知道我可以将类/结构公开，然后允许用户使用/deep/传递样式，但我注意到那里的一些优先级问题，尽管这似乎是一种更理想的方法。我也知道我可以在组件上创建输入以传入样式对象并使用[ngStyle]指令，但这可能会变得复杂，特别是如果用户想要将相同的样式传递给多个部分的成分

组件的结构是：

<div class="wrapper" [class.open]="showOptions">
    <ul class="options">
        <li *ngFor="let option of options" (click)="selectOption(option)">{{option.label}}</li>
    </ul>
    <div class="current" (click)="toggleOptions()">{{value.label}}</div>
    <div class="dropdown" (click)="toggleOptions()"></div>
</div>

我可以为每个附加[ngStyle]，但这看起来很麻烦。有更好的方法，还是我最好的方式？

Answer 1

<强>更新

所有新浏览器现在都支持

::slotted，并且可以与`ViewEncapsulation.ShadowDom

一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

<强>原始

您可以按照自己的提及使用ngStyle，也可以使用::ng-deep

从外部设置样式

* ::ng-deep child-comp dive.wrapper {
  border: solid 3px red;
}

您还可以使用SASS和路径变量来允许用户使用环境变量配置SASS导入。

将样式传递给组件

1 个答案: