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

发布时间：2020-12-17 17:21:50 所属栏目：安全来源：网络整理

导读：更新：在我的评论中,您可以在Google云端硬盘上找到一个压缩项目.任何人都可以制作一个Plunker(我从未做过 – 需要更改的内容,任何解释此更改的文章/博客). 我有一个扩展BaseComponent的SearchComponent,我将ElementRef传递给BaseComponent,以便BaseComponent

更新：在我的评论中,您可以在Google云端硬盘上找到一个压缩项目.任何人都可以制作一个Plunker(我从未做过 – 需要更改的内容,任何解释此更改的文章/博客).

我有一个扩展BaseComponent的SearchComponent,我将ElementRef传递给BaseComponent,以便BaseComponent可以为SearchComponent的选择标记添加边框样式：auction-search.

基本上我想在页面上绘制所有组件(扩展BaseComponent)的边框,这样我就可以轻松识别它们.

然而,似乎拍卖搜索标签的宽度是自动的(我不知道这是否是基于下图中的CSS框的0px.

当我在auction-search元素下面添加一个具有相同内容和样式的div元素时,使用Chrome Tools检查窗口(如下图所示),然后我可以看到正确的边框并显示实际宽度.

所以问题是如何给组件的选择器一个适当的宽度,以便它可以成为像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);
    }
  }

应用程序/组件/搜索/ search.html

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

应用/组件/应用/ application.html

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

enter image description here

解决方法

我不完全理解你的问题,但这可能会对你有所帮助.

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

Take a look here

要么

更新：

由于您只想通过程序应用样式,我已经做到了

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

它使用Angular2的指令概念.有了这个,我使用了ViewChild,exportAs.在这个例子中,我的BaseClass有一些子组件(多个子组件).通过使用directive和elementRef,您可以根据需要定位单个子组件.
现在您不必像在演示中那样扩展Baseclass.

import {Directive,Component,ViewChild} from 'angular2/core';
import {Component,ElementRef} from 'angular2/core';
import {Directive,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();
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!