Angular 2 - 样式组件的选择器边框 css 属性 [英] Angular 2 - Styling Component's selector border css property
问题描述
更新:在下面我的评论中，您可以在 Google 驱动器上找到一个压缩项目.任何人都可以制作 Plunker(我从未做过 - 需要更改的内容，任何解释此更改的文章/博客).
我有一个 SearchComponent 扩展 BaseComponent 并且我将 ElementRef 向下传递给 BaseComponent 以便 >BaseComponent 可以为 SearchComponent 的选择器标签添加边框样式:auction-search.
基本上我想为页面上的所有组件(扩展BaseComponent)绘制一个边框，以便我可以轻松识别它们.
但是auction-search标签的宽度好像是自动的(根据下图的CSS框，不知道是不是0px.
当我在auction-search元素下面添加一个内容和样式相同的div元素时，使用Chrome工具检查窗口(如下图所示)，我可以看到一个合适的边框并显示一个真实的宽度.
那么问题是如何给组件的选择器一个合适的宽度，让它成为像DIV这样的普通容器?添加位置:绝对??
我玩过添加...
style.border = '8px 纯绿色';position:absolute我得到了边界，但这会影响下一个 div 元素，该元素的文本将与组件的文本重叠.
我相信我不能使用基础组件的主机属性，因为装饰器的属性不是继承的.有人可以确认吗?
在 CSS 中传播相同更改的最简单方法是什么?贯穿所有组件?
host: {'style': '边框:8px 纯绿色'}谢谢，辐射
这是我的 2 个组件的代码:
//base-component.ts从angular2/core"导入{Component, OnInit, ElementRef}；@Component({selector: 'base-component'})导出类 BaseComponent 实现 OnInit{构造函数(私有_elementRef:ElementRef){_elementRef.nativeElement.style.border = '4px 纯绿色';}//拍卖搜索.ts从 'angular2/core' 导入 {Component, ElementRef}；从../base/base-component"导入{BaseComponent}；@零件({选择器:'拍卖搜索'，模板网址:'app/components/search/search.html'})导出默认类 SearchComponent 扩展 BaseComponent{构造函数(私有_elementRef:ElementRef){超级(_elementRef)；}}app/components/search/search.html
<p>一些带有 <br> 的文本另一条线</p>app/components/application/application.html
<div class="col-md-3"><拍卖搜索></拍卖搜索></div>我不完全理解您的问题，但这可能会对您有所帮助.
主机:{'风格':'显示:块；'，}或
更新:
由于您只想通过程序应用样式，所以我做了这个
http://plnkr.co/edit/9LvtDq7xei0WEVzAelHv?p=preview
它使用了Angular2的directive概念.我使用了 ViewChild、exportAs.在这个例子中，我的 BaseClass 有一些子组件(多个子组件).通过使用 directive 和 elementRef，您可以根据需要定位单个子组件.现在您不必像在演示中那样扩展 Baseclass.
import {Directive,Component,ViewChild} from 'angular2/core';从 'angular2/core' 导入 {Component, OnInit, ElementRef};从'angular2/core'导入{Directive,Component,ViewChild,ViewChildren,ElementRef,Renderer}；从应用程序/搜索组件"导入 {SearchComponent}；//从'app/directive'导入{MyCustomDirective}；@指示({选择器:'[我的自定义指令]'，exportAs:'customdirective'})类 MyCustomDirective{构造函数(私有_renderer:渲染器，私有_el:ElementRef){}firstChildCmp(className:string,isAdd:boolean){this._el.nativeElement.style.border = '2px 纯橙色';}secondChildCmp(className:string,isAdd:boolean){this._el.nativeElement.style.border = '2px 纯红色';}第三个ChildCmp(){ console.log('firstChildCmp');this._el.nativeElement.style.border = '2px 纯蓝色';}}@零件({选择器:'我的应用'，指令:[MyCustomDirective，SearchComponent]，模板:`<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>`,主持人:{'风格':'显示:块；'，}})导出类 BaseComponent{@ViewChild('var1') 第一个元素；@ViewChild('var2') 第二个元素；@ViewChild('var3') 第三元素；构造函数(私有_elementRef:ElementRef){_elementRef.nativeElement.style.border = '4px 纯绿色';}ngAfterViewInit(){this.firstElement.firstChildCmp();this.secondElement.secondChildCmp();this.thirdElement.thirdChildCmp();}}Update: In my comment bellow you can find a zipped project on Google drive. Can anyone make a Plunker (I have never done it - what needs to be changed, any article/blog explaining this change).
I have a SearchComponent which extends BaseComponent and I am passing ElementRef down to BaseComponent so that BaseComponent can add a border style to SearchComponent's selector tag: auction-search.
Basically I want to draw a border for all components (that extend BaseComponent) on a page, so I can easily identify them.
However it seems that the width of auction-search tag is auto (I don't know if this is 0px based on the CSS box in the picture below.
Using Chrome Tools inspection window when I add a div element with the same content and style below auction-search element (as shown in the picture below), I can then see a proper border and a real width is displayed.
So the question is how to give a component's selector a proper width so it can become a normal container like a DIV? Add position: absolute??
I played with adding ...
style.border = '8px solid green';position:absolute
and I got the bounding border, however that affected the next div element which will have text overlapping the component's text.
I believe I cannot use host property of the base component because the decorator's properties are not inherited. Can someone confirm?
What is the easiest way to propagate the same change in CSS e.g. throughout all components?
host: {
'style': 'border: 8px solid green'
}
Thanks,
Rad
Here is the code for my 2 components:
//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>
解决方案 I don't understand your problem exactly but this might help you.
host:{
'style': 'display: block;',
}
or
UPDATE:
As you want to apply styles through program only, I have made this
http://plnkr.co/edit/9LvtDq7xei0WEVzAelHv?p=preview
which uses directive concept of Angular2. With that I have used ViewChild,exportAs. In this example,my BaseClass has some child components(more than one child components). By using directive and elementRef, you can target individual child component as you want.
Now you don't have to extent Baseclass as you did in your demo.
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 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
