角2 - 定型组件的选择边框的CSS属性 [英] Angular 2 - Styling Component's selector border css property
问题描述
更新：在我的评论波纹管，你可以找到谷歌驱动器上的压缩项目。任何人都可以做一个Plunker（我从来没有做过它 - 需要改变的东西，任何物品/博客解释这种变化）。
我有延伸BaseComponent和我传递ElementRef到BaseComponent使BaseComponent可以添加一个边框样式的SearchComponent的选择标签的的SearchComponent：拍卖搜索。基本上我想画一个边框所有组件（扩展BaseComponent）页面上，这样我就可以很容易地识别它们。
不过似乎拍卖搜索标签的宽度自动（我不知道这是不是0像素根据下面的图片CSS框。
使用Chrome工具检查窗当我添加相同的内容和风格低于拍卖搜索元素（如下图所示）的div元素，然后我就可以看到显示正确的边框和一个真正的宽度。
所以，问题是如何给一个组件的选择一个适当的宽度，因此它可以变得像DIV标准集装箱？添加的位置是：绝对??
我打了加... style.border =8像素坚实的绿色;位置：绝对
我得到的边界接壤，但受影响，这将有文本组件的文本重叠的下一个div元素。
我相信我可以不使用基本组件的主机属性，因为装饰器的属性不可继承。有人可以证实？
什么是传播例如CSS中的相同变化的最简单方法在所有组件？
主持人：{\r
风格：边界：8像素坚实的绿色\r
} \r
谢谢，
拉德
这里是code为我的2个部分组成：
//基component.ts\r
进口{组件，OnInit的，ElementRef}从angular2 /芯;\r
\r
@Component（{选择：基本组成部分'}）\r
出口类BaseComponent实现的OnInit\r
{\r
构造函数（私人_elementRef：ElementRef）{\r
_elementRef.nativeElement.style.border ='4PX纯绿色';\r
}\r
\r
//auction-search.ts\r
进口{组件，ElementRef}从'angular2 /核心;\r
进口{} BaseComponent从../base/base-component\r
\r
@零件（{\r
选择：拍卖搜索'，\r
templateUrl：应用程序/组件/搜索/ search.html\r
}）\r
出口默认类的SearchComponent扩展BaseComponent\r
{\r
构造函数（私人_elementRef：ElementRef）\r
{\r
超（_elementRef）;\r
}\r
} \r
应用程序/组件/搜索/ search.html
＆LT; P＆GT;\r
一些文本以＆lt; BR＆GT;\r
另一条线\r
＆LT; / P＆GT; \r
应用程序/组件/应用/ application.html
＆LT; DIV CLASS =COL-MD-3＆GT;\r
＆LT;拍卖搜索＆GT;＆LT; /拍卖搜索＆GT;\r
＆LT; / DIV＆GT; \r
![](\"http://i.stack.imgur.com/7H1iL.jpg\")
我不完全理解你的问题，但是这可能会帮助你。
主持人：{
风格：显示：块;，
}
或
更新
当你想通过应用程序只，我做了这个风格
http://plnkr.co/edit/9LvtDq7xei0WEVzAelHv?p=$p$ PVIEW
它使用指令 Angular2的概念。有了，我已经使用 ViewChild ， EXPORTAS 。在这个例子中，我的的BaseClass 有一些子组件（一个以上的子组件）。通过使用指令和 elementRef ，您可以根据需要针对个别子组件。
现在，你不必程度基类如您在您的演示一样。
进口{指令，组件，ViewChild}从'angular2 /核心;
进口{组件，OnInit的，ElementRef}从'angular2 /核心;
进口{指令，组件，ViewChild，ViewChildren，ElementRef，渲染器}从'angular2 /核心;
进口{}的SearchComponent从'应用程序/ SearchComponent的';
// {进口} MyCustomDirective从'应用程序/指令';@指示（{
选择：[我的 - 自定义指令]'，
EXPORTAS：customdirective
}）
类MyCustomDirective { 构造函数（私人_renderer：渲染器，私人_el：ElementRef）{ } firstChildCmp（的className：字符串，isAdd：布尔）
{
this._el.nativeElement.style.border = 2px的固体橙色;
}
secondChildCmp（的className：字符串，isAdd：布尔）
{
this._el.nativeElement.style.border = 2px的固体红;
}
thirdChildCmp（）
{的console.log（'firstChildCmp'）;
this._el.nativeElement.style.border = 2px的固体蓝色;
}
}
@零件（{
选择：我的应用，
指令：[MyCustomDirective，的SearchComponent]
模板：`
＆LT; DIV＆GT;
＆LT; DIV＆gt;此处有些内容与LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV＆GT;
＆LT;拍卖搜索＃VAR1 = customdirective我，定制指令＆GT;＆LT; /拍卖搜索＆GT;
＆LT;拍卖搜索＃VAR2 = customdirective我，定制指令＆GT;＆LT; /拍卖搜索＆GT;
＆LT;拍卖搜索＃VAR3 = customdirective我，定制指令＆GT;＆LT; /拍卖搜索＆GT;
＆LT; / DIV＆GT;
`
主办：{
风格：显示：块;，
}
}）
出口类BaseComponent {
@ViewChild（'VAR1'）firstElement;
@ViewChild（'VAR2'）secondElement;
@ViewChild（'VAR3'）thirdElement; 构造函数（私人_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();
}
}
这篇关于角2 - 定型组件的选择边框的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
