angular - 在 Angular 2 中重用组件

Question

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

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

这是否是在 Web 应用程序中使用 Angular 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

"Can this be done?"

是的!它称为嵌入 或内容投影，您可以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 编译器会将它“转换”到 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>

然后像这样绑定(bind)到父级的 Input 属性:

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

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