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

Question

更新：在下面的评论中，您可以在Google云端硬盘上找到一个压缩项目。任何人都可以制造Plunker（我从未做过-需要更改的内容，任何解释此更改的文章/博客）。

我有一个SearchComponent延伸的BaseComponent，我ElementRef向下传递到，BaseComponent以便BaseComponent可以向SearchComponent的选择器标记添加边框样式：auction-search。

基本上，我想为BaseComponent页面上所有（扩展了）的组件画一个边框，这样我就可以轻松地识别它们。

但是auction-search标签的宽度似乎是自动的（基于下图的CSS框，我不知道它是否为0px。

当我在拍卖搜索元素下面添加内容和样式相同的div元素时，使用Chrome工具检查窗口（如下图所示），我可以看到适当的边框并显示实际宽度。

因此，问题是如何为组件的选择器提供适当的宽度，使其可以像DIV一样成为普通容器？添加位置：绝对？

我玩过加...

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

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

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

在整个组件中传播CSS中相同更改的最简单方法是什么？

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

谢谢，拉德

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

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

app / components / search / search.html

//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 / application / application.html

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

Answer 1

我不太清楚你的问题，但这可能对你有帮助。

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

看看这里

或者

更新：

由于您只想通过程序应用样式，所以我做了这个

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

它使用directiveAngular2 的概念。我用过这个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();
  }
}