重用 Angular 中的组件 2
Reusing Components in Angular 2
当我开始使用 Angular2 时,我认为创建组件的主要原因是您可以重用它们。例如:
<custom-button id="button1">button 1</custom-button>
<custom-button id="button2">button 2</custom-button>
这是在 Web 应用程序中使用 angular2 和组件的重要原因吗?
我还没有找到专门回答我关于如何执行此操作的问题的资源。
我想创建一个按钮和一个输入,这两个最基本和最常用的 html 元素,并使它们可重复使用。
我尝试制作一个按钮组件并重复使用它。
我尝试在 html 模板中使用它,如下所示:
<custom-button>some text</custom-button>
<custom-button>different text</custom-button>
但是文本没有显示在按钮上。这能做到吗?
我想知道的另一件事是执行此操作时的唯一 html ID。我可以为每个实例添加唯一的 html id 属性吗?
可能喜欢:
<custom-button id="display-bikes">bikes</custom-button>
<custom-button id="display-helmets">helmets</custom-button>
然后我可以使用元素的唯一 ID 做一些特定的 css?
这就是我想知道的,以及如何去做。
然而,这是我涉及的其余代码:
组件:
import { Component } from '@angular/core';
@Component({
selector: 'custom-button',
templateUrl: 'app/shared/button.component.html',
styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent { }
css:
button {
font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif;
border-radius: 6px;
height: 60px;
width: 280px;
text-decoration: none;
background-color: $accent;
padding: 12px;
color: #FFF;
cursor: pointer;
}
button:focus {
outline:0 !important;
}
html:
<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
try now <!-----lets get rid of this and let the client decide what text to display somehow???
</button>
你真的不应该写具体的 CSS 这取决于你的组件的 ID,这是没有必要的。
每个组件都是封装的(默认情况下)。封装使用 Shadow DOM 或仿真(默认)。
对于每个组件,您可以选择 3 种封装模式之一:
- ViewEncapsulation.None -- 没有样式封装
- ViewEncapsulation.Emulated -- 默认,使用属性到"encapsulate"样式
- ViewEncapsulation.Native -- 使用阴影 DOM
这是一篇关于此主题的好博客 post:http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
您可以使用 @Input
装饰器来实现。您可以阅读更多相关信息 here。首先,在你的 ButtonComponent
中添加一个变量来显示按钮名称,如下所示:
export class ButtonComponent {
@Input() buttonName: string;
}
注意:需要导入Input
装饰器:import { Input } from '@angular/core';
然后,在html中使用双向数据绑定(插值)显示按钮值:
<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
{{buttonName}}
</button>
最后,当你想显示按钮组件时,你可以给按钮一个简单的属性值的名字:
<custom-button buttonName="First Button"></custom-button>
<custom-button buttonName="Second Button"></custom-button>
<custom-button buttonName="Third Button"></custom-button>
我尽量保持简单,如果您遇到任何问题,请随时提问。
"Can this be done?"
是的!它被称为 transclusion 或 content projection,你可以 read about it in detail here。
方法如下:
在button.component.html
中:
<button>
<ng-content></ng-content>
</button>
然后,每当您将内容放入组件的标签内时,如下所示:<custom-button id="display-bikes">bikes</custom-button>
,Angular 2 编译器会将其 'project' 放入组件的模板中 ng-content
标签。所以最终,你会在运行时得到这个:
<button>
bikes
</button>
这只是一个简单的例子。您可以使用它获得真正的进步,并执行诸如投影其他组件和拥有多个 <ng-content>
插座之类的事情。在上面链接的博客中阅读相关内容。
And then I can do some specific css using the unique id of the element?
此外,是的...虽然您不会使用标准 id 属性。
在您的 ButtonComponent 上:
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-button',
templateUrl: 'app/shared/button.component.html',
styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent {
@Input() styleId: string;
//...
}
假设 button.component.css 有两个 类 名为 class-one
和 class-two
。
在button.component.html中:
<button [ngClass]="{class-one: styleId === 'applyClassOne', class-two: styleId === 'applyClasstwo'}">
<ng-content></ng-content>
</button>
然后像这样绑定到父级中的输入 属性:
<custom-button [styleId]="'applyClassOne'"></custom-button>
<custom-button [styleId]="'applyClassTwo'"></custom-button>
还有其他动态应用样式的方法,但这是最简单的方法,因为只有两种 类 可供选择。
当我开始使用 Angular2 时,我认为创建组件的主要原因是您可以重用它们。例如:
<custom-button id="button1">button 1</custom-button>
<custom-button id="button2">button 2</custom-button>
这是在 Web 应用程序中使用 angular2 和组件的重要原因吗?
我还没有找到专门回答我关于如何执行此操作的问题的资源。
我想创建一个按钮和一个输入,这两个最基本和最常用的 html 元素,并使它们可重复使用。
我尝试制作一个按钮组件并重复使用它。
我尝试在 html 模板中使用它,如下所示:
<custom-button>some text</custom-button>
<custom-button>different text</custom-button>
但是文本没有显示在按钮上。这能做到吗?
我想知道的另一件事是执行此操作时的唯一 html ID。我可以为每个实例添加唯一的 html id 属性吗?
可能喜欢:
<custom-button id="display-bikes">bikes</custom-button>
<custom-button id="display-helmets">helmets</custom-button>
然后我可以使用元素的唯一 ID 做一些特定的 css?
这就是我想知道的,以及如何去做。
然而,这是我涉及的其余代码:
组件:
import { Component } from '@angular/core';
@Component({
selector: 'custom-button',
templateUrl: 'app/shared/button.component.html',
styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent { }
css:
button {
font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif;
border-radius: 6px;
height: 60px;
width: 280px;
text-decoration: none;
background-color: $accent;
padding: 12px;
color: #FFF;
cursor: pointer;
}
button:focus {
outline:0 !important;
}
html:
<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
try now <!-----lets get rid of this and let the client decide what text to display somehow???
</button>
你真的不应该写具体的 CSS 这取决于你的组件的 ID,这是没有必要的。
每个组件都是封装的(默认情况下)。封装使用 Shadow DOM 或仿真(默认)。 对于每个组件,您可以选择 3 种封装模式之一:
- ViewEncapsulation.None -- 没有样式封装
- ViewEncapsulation.Emulated -- 默认,使用属性到"encapsulate"样式
- ViewEncapsulation.Native -- 使用阴影 DOM
这是一篇关于此主题的好博客 post:http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
您可以使用 @Input
装饰器来实现。您可以阅读更多相关信息 here。首先,在你的 ButtonComponent
中添加一个变量来显示按钮名称,如下所示:
export class ButtonComponent {
@Input() buttonName: string;
}
注意:需要导入Input
装饰器:import { Input } from '@angular/core';
然后,在html中使用双向数据绑定(插值)显示按钮值:
<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
{{buttonName}}
</button>
最后,当你想显示按钮组件时,你可以给按钮一个简单的属性值的名字:
<custom-button buttonName="First Button"></custom-button>
<custom-button buttonName="Second Button"></custom-button>
<custom-button buttonName="Third Button"></custom-button>
我尽量保持简单,如果您遇到任何问题,请随时提问。
"Can this be done?"
是的!它被称为 transclusion 或 content projection,你可以 read about it in detail here。
方法如下:
在button.component.html
中:
<button>
<ng-content></ng-content>
</button>
然后,每当您将内容放入组件的标签内时,如下所示:<custom-button id="display-bikes">bikes</custom-button>
,Angular 2 编译器会将其 'project' 放入组件的模板中 ng-content
标签。所以最终,你会在运行时得到这个:
<button>
bikes
</button>
这只是一个简单的例子。您可以使用它获得真正的进步,并执行诸如投影其他组件和拥有多个 <ng-content>
插座之类的事情。在上面链接的博客中阅读相关内容。
And then I can do some specific css using the unique id of the element?
此外,是的...虽然您不会使用标准 id 属性。
在您的 ButtonComponent 上:
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-button',
templateUrl: 'app/shared/button.component.html',
styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent {
@Input() styleId: string;
//...
}
假设 button.component.css 有两个 类 名为 class-one
和 class-two
。
在button.component.html中:
<button [ngClass]="{class-one: styleId === 'applyClassOne', class-two: styleId === 'applyClasstwo'}">
<ng-content></ng-content>
</button>
然后像这样绑定到父级中的输入 属性:
<custom-button [styleId]="'applyClassOne'"></custom-button>
<custom-button [styleId]="'applyClassTwo'"></custom-button>
还有其他动态应用样式的方法,但这是最简单的方法,因为只有两种 类 可供选择。