Angular 2 - 样式组件的选择器边框 css 属性

Question

更新： 在我下面的评论中，您可以在 Google 驱动器上找到一个压缩项目。任何人都可以制作一个 Plunker（我从来没有做过 - 需要更改什么，任何 article/blog 解释这个更改）。

我有一个扩展 BaseComponent 的 SearchComponent 并且我将 ElementRef 向下传递给 BaseComponent 以便 BaseComponent 可以向 SearchComponent的选择器标签：auction-search。

基本上我想为页面上的所有组件（扩展 BaseComponent）绘制边框，以便我可以轻松识别它们。

不过auction-search标签的宽度好像是auto的（根据下图CSS框不知道是不是0px

使用Chrome工具检查window当我在auction-search元素下面添加一个具有相同内容和样式的div元素时（如下图所示），我可以然后看到正确的边框并显示实际宽度。

所以问题是如何给一个组件的选择器一个合适的宽度，这样它就可以像DIV一样成为一个普通的容器？添加位置：绝对??

我尝试添加...

style.border = '8px solid green';position:absolute

我得到了边框，但这影响了下一个 div 元素，该元素的文本将与组件的文本重叠。

我相信我不能使用基础组件的主机属性，因为装饰器的属性没有被继承。有人可以确认吗？

在 CSS 中传播相同更改的最简单方法是什么，例如在所有组件中？

host: {
     'style': 'border: 8px solid green'
     }

谢谢，弧度

这是我的 2 个组件的代码：

//base-component.ts
import {Component, OnInit, ElementRef} from "angular2/core";

@Component({selector: 'base-component'})
export class BaseComponent implements OnInit 
{
  constructor(private _elementRef: ElementRef){
    _elementRef.nativeElement.style.border = '4px solid green';
  }

  //auction-search.ts   
  import {Component, ElementRef} from 'angular2/core';
  import {BaseComponent} from "../base/base-component";

  @Component({
    selector: 'auction-search',
    templateUrl: 'app/components/search/search.html'
  })
  export default class SearchComponent extends BaseComponent
  {
    constructor(private _elementRef: ElementRef)
    {
      super(_elementRef);
    }
  }

app/components/search/search.html

<p>
  Some text with <br>
  Another line
</p>

app/components/application/application.html

<div class="col-md-3">
  <auction-search></auction-search>
</div>

Answer 1

这是我的案例的解决方案。 @micronyks 感谢您介入。我不能使用主机属性因为它不可继承属性.

我还想知道是否有更简单的方法可以在不使用继承的情况下将一些样式更改传播到所有组件？所以基本上我想避免更改组件的 class 声明的签名。

//基数-component.ts

import {Component, OnInit, ElementRef, Renderer} from "angular2/core";

@Component({
    selector: 'base-component'
    /* This won't work - no inheritance of component decorator properties (Am I right here?)
    ,
    host: {
        'style': 'display:block'
    }
    */
})
export class BaseComponent {
    constructor(elementRef: ElementRef,  renderer: Renderer)
    {
        //first way
        renderer.setElementStyle(elementRef.nativeElement, 'border', '1px solid blue');
        renderer.setElementStyle(elementRef.nativeElement, 'display', 'block');

        //second way
        //elementRef.nativeElement.style.border = '1px solid blue'
        //elementRef.nativeElement.style.display = 'block'
    }
}

Answer 2

我不完全理解你的问题，但这可能对你有帮助。

 host:{
    'style': 'display: block;', 
  }

Take a look here

或

更新：

因为你只想通过程序应用样式，我做了这个

http://plnkr.co/edit/9LvtDq7xei0WEVzAelHv?p=preview

它使用了 Angular2 的 directive 概念。我使用了 ViewChild、exportAs。在这个例子中，我的 BaseClass 有一些子组件（不止一个子组件）。通过使用 directive 和 elementRef，您可以根据需要定位单个子组件。现在您不必像在演示中那样扩展 Baseclass。

import {Directive,Component,ViewChild} from 'angular2/core';
import {Component, OnInit, ElementRef} from 'angular2/core';
import {Directive,Component,ViewChild,ViewChildren,ElementRef,Renderer} from 'angular2/core';
import {SearchComponent} from 'app/searchComponent';
//import {MyCustomDirective} from 'app/directive';

@Directive({
  selector:'[my-custom-directive]',
  exportAs:'customdirective'
})
class MyCustomDirective{

  constructor(private _renderer:Renderer,private _el:ElementRef){

  }

 firstChildCmp(className:string,isAdd:boolean)
 {
     this._el.nativeElement.style.border = '2px solid orange';
 }
 secondChildCmp(className:string,isAdd:boolean)
 { 
   this._el.nativeElement.style.border = '2px solid red';
 }
 thirdChildCmp()
 { console.log('firstChildCmp');
     this._el.nativeElement.style.border = '2px solid blue';
 }
} 


@Component({
    selector: 'my-app',
    directives:[MyCustomDirective,SearchComponent],
    template: `
    <div>
        <div >Some content here</div>
    </div>

    <div>
      <auction-search #var1=customdirective my-custom-directive></auction-search>
      <auction-search #var2=customdirective my-custom-directive></auction-search>
      <auction-search #var3=customdirective my-custom-directive></auction-search>
  </div> 
    `,
    host:{
    'style': 'display: block;', 
  }
})
export class BaseComponent{
  @ViewChild('var1') firstElement;
  @ViewChild('var2') secondElement;
  @ViewChild('var3') thirdElement;

  constructor(private _elementRef: ElementRef){
    _elementRef.nativeElement.style.border = '4px solid green';
  }

  ngAfterViewInit(){
    this.firstElement.firstChildCmp();
    this.secondElement.secondChildCmp();
    this.thirdElement.thirdChildCmp();
  }
}

Angular 2 - 样式组件的选择器边框 css 属性

Angular 2 - Styling Component's selector border css property

components

angular