Question

我正在使用ngx-toastr创建一个自定义烤面包机组件。对于自定义组件，我无权访问烤面包机容器。所有创建的烤面包都需要堆叠在烤面包机容器中。吐司对齐到右上角（通过top css属性）。我已经使用主机上下文设置了烤面包机容器的样式，因为它在自定义组件中不可用，它来自库。

它运作良好，但是当有多个吐司时会出现问题。由于它们是基于宿主上下文的样式，因此所有敬酒的top-css属性将具有相同的值。

如果每个吐司的高度为40像素，则无法基于第n个子属性w.r.t主机上下文自定义最高值。有没有人遇到过类似的问题？任何帮助表示赞赏。

:host-context(.toast-top-right.toast-container):nth-child{
    top: calc(66 + ( n * 40))px; 
    right: 12px;
}

请在此处找到插图https://stackblitz.com/edit/angular-t7ancy 尝试多次单击测试，观察在“覆盖容器”内部创建的div

Answer 1

我不是将每个烤面包机放置在顶部：66px右：12px，而是放置.toast-container并让所有烤面包机项目以默认的块方式流动。

.toast-container {
    position: fixed;
    top: 66px;
    right: 12px;
}

.toast[_nghost-c2] {
    position: relative;
}

类似toastr.component.scss中的css定义不是以这种方式应用的。为了应用css定义，我继续这样做：

encapsulation: ViewEncapsulation.None,

https://stackblitz.com/edit/angular-vkefn9?file=src%2Fcustom-toastr%2Ftoastr.component.ts

Answer 2

@August该建议有所帮助。这更多与position属性有关。我已经解决了，如下图所示

:host-context(.toast-container){
    pointer-events: none;
    position: fixed;
    z-index: 999999;
  }
  :host(.toast-success){
    border-left-color: #51A351;   
    position:relative
  }

设置第n个子级的w.r.t主机上下文的角度

2 个答案: