Question

我想用ViewEncapsulation.Native制作组件，它使用Bootstrap 4，其他人使用Bootstrap 3.这是带Bootstrap 4的组件：

import { Component, ViewEncapsulation } from '@angular/core';
import { NgForm }    from '@angular/common';

import { Hero }    from './hero';
@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css'], //Bootstrap 4 CSS file
  encapsulation: ViewEncapsulation.Native
})
export class HeroFormComponent {}

在index.html中加载了Bootstrap 3：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

问题在于，当包含Bootstrap 3时，它会使一切都很小。您可以在我的Plunker: Angular 2 ViewEncapsulation.Native with Bootstrap 3 and Bootstrap 4中看到它的外观。当Bootstrap 3被评论时，一切看起来都更好。我想问题就发生了，因为Bootstrap 4使用rem来设置按钮样式：

.btn {
    display: inline-block;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

对于Bootstrap 4，rem，以root身份，16px为html代码设置为html { font-size: 16px; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; }：

10px

但是Bootstrap 3.3.6将其设置为html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }：

10px

因为Shadow DOM中包含Bootstrap 4样式，所以它们不适用于HTML（这很好）。但正因为如此，我的组件的样式将使用rem作为16px而不是@Component({ selector: 'hero-form', templateUrl: 'app/hero-form.component.html', styleUrls: ['app/bootstrap.css'], styles: ['hero-form, #parent-element {font-size: 16px;}'], encapsulation: ViewEncapsulation.Native }) export class HeroFormComponent {}。我试图为组件本身和视图中的第一个元素设置样式：

rem

但它没有用。我认为默认情况下它应该以这种方式工作 - 如果rem对于每个Shadow DOM都是相同的，它将在一个项目中创建多个CSS框架（并且它可能非常有用，例如从Bootstrap 3迁移到Bootstrap 4）非常努力。是否可以为不同的Web组件设置不同的rem，而不将Bootstrap文件更改为不使用filename = (GPN + '_' + inspector + '_' + date + '.txt') save_path = 'c:/usr/local/home/brperez/QCTestFiles' complete_name = os.path.join(save_path, filename) file1 = open(complete_name, "w")？提前感谢您的帮助。

Answer 1

我认为没有办法改变rem，但你可以利用这样的东西：

@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css', 'app/my.css'],

<强> my.css

.btn {font-size: 16px;}
.form-control { font-size: 14px;}

另见plunkr https://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview

是否可以使用Angular 2的ViewEncapsulation.Native为不同的Web组件设置不同的“rem”？

1 个答案: