Question

我在两个不同的组件中使用**ngx bootstrap modal**，在两个不同的组件中，我使用:: ng-deep .modal-dialog设置宽度和高度

in component one

::ng-deep .modal-dialog {
width: 200px;
height : 200px
}

in another(2nd) component 
::ng-deep .modal-dialog {
    width: 400px;
    height : 400px
    }

但是当我将一个组件移动到另一个组件时，:: ng-deep值变得相同，就像常量的宽度和高度一样，模态的css值不会根据组件级别（如全局级别）而改变

Answer 1

尝试添加自定义类，如here所述。在此示例中，@section scripts { <script> //do stuff here </script> } CSS类被添加到现有的gray modal-lg类中：

modal-dialog

因此，尝试在每个组件中添加不同的类（在我的示例中为<div role="document" class="modal-dialog gray modal-lg"> <div class="modal-content"> ... </div> </div>和component1），然后重写CSS：

component2

在另一个（第二个）组件中

::ng-deep .modal-dialog.component1 {
  width: 200px;
  height : 200px
}

请注意，一旦加载了组件，此CSS类将在全球范围内可用（由于::ng-deep .modal-dialog.component2 { width: 400px; height : 400px }），因此具有相同名称的最新类将获胜。

ng深样式针对Angular 5中的不同组件进行了分离

1 个答案: