角度：ViewEncapsulation.None

Question

我不了解@Component内部的属性封装的含义

@Component({
  selector: 'az-manage',
  templateUrl: './manage.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./manage.component.scss']
})
export class ManageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

谢谢

Answer 1

如果保留默认封装，则此组件的所有CSS规则将添加属性选择器，因此它们将如下所示：

<script type="text/javascript">
  var compressionNonce = "8023f35fe4";
  var testCompression = {
    get: function(test) {
      var x;
      if (window.XMLHttpRequest) {
        x = new XMLHttpRequest();
      } else {
        try {
          x = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
          try {
            x = new ActiveXObject('Microsoft.XMLHTTP');
          } catch (e) {};
        }
      }

      if (x) {
        x.onreadystatechange = function() {
          var r, h;
          if (x.readyState == 4) {
            r = x.responseText.substr(0, 18);
            h = x.getResponseHeader('Content-Encoding');
            testCompression.check(r, h, test);
          }
        };

        x.open('GET', ajaxurl + '?action=wp-compression-test&test=' + test + '&_ajax_nonce=' + compressionNonce + '&' + (new Date()).getTime(), true); **
        * x.send(''); ** *
      }
    },

    check: function(r, h, test) {
      if (!r && !test)
        this.get(1);

      if (1 == test) {
        if (h && (h.match(/deflate/i) || h.match(/gzip/i)))
          this.get('no');
        else
          this.get(2);

        return;
      }

      if (2 == test) {
        if ('"wpCompressionTest' == r)
          this.get('yes');
        else
          this.get('no');
      }
    }
  };
  testCompression.check();
</script>

，生成的实际标记将如下所示：

.yourclass[ngcomponent-0] {
  your set of rules
}

这样，您的CSS就严格地绑定到了组件，因此不会影响应用程序的任何其他部分。如果您执行<yourcompoent ngcomponent-0=""></yourcompoent> ，则不会添加属性选择器，CSS将是全局的，并且会影响应用程序的所有其他部分。

免责声明：我不记得它是ngcomponent-x还是ngN-component或其他-没关系-解释了规则。