在Angular 2中重用组件

Question

当我开始使用Angular 2时，我认为创建组件的主要原因是因为您可以重用它们。 例如：

<custom-button id="button1">button 1</custom-button>
<custom-button id="button2">button 2</custom-button>

这是一个很大的理由，在网络应用程序中使用角度2和组件，它可以做到吗？

我还没有找到专门回答我关于如何执行此操作的问题的资源。

我想创建一个按钮和一个输入，2个最基本和常用的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>

Answer 1

“这可以吗？”

是! 这就是所谓的transclusion或内容投影 ，您可以在这里详细了解它 。

这是如何做：

在button.component.html ：

<button>
    <ng-content></ng-content>
</button>

然后，无论何时将内容放入组件的标签内，如下所示： <custom-button id="display-bikes">bikes</custom-button> ，Angular 2编译器会将其“投影”到组件的模板中在ng-content标签之间。 所以最终，你会在运行时得到它：

<button>
    bikes
</button>

这只是一个简单的例子。 您可以获得非常高级的功能，并执行项目其他组件和多个<ng-content>插座等操作。 在上面链接的博客上阅读相关内容。

然后我可以使用元素的唯一ID来做一些特定的CSS？

此外，是的...虽然你不会使用标准的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>

然后绑定到父类中的Input属性，如下所示：

<custom-button [styleId]="'applyClassOne'"></custom-button>
<custom-button [styleId]="'applyClassTwo'"></custom-button>

还有其他动态应用样式的方法，但这个方法最简单，因为只有两个类可供选择。

Answer 2

您可以使用@Input装饰器来实现此@Input 。 你可以在这里阅读更多相关信息。 首先，在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>

我尽量保持这个简单，如果遇到任何问题，请随时提问。

Answer 3

你真的不应该费心去编写依赖于组件ID的特定CSS，这不是必需的。

每个组件都被封装（默认情况下）。 封装使用Shadow DOM或仿真（默认）。 对于每个组件，您可以选择以下3种封装模式之一：

• ViewEncapsulation.None - 没有样式封装
• ViewEncapsulation.Emulated - 默认值，使用属性“封装”样式
• ViewEncapsulation.Native - 使用Shadow DOM

这是一篇关于这个主题的好博文： http ： //blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html