Повторное использование компонентов в угловом 2

Question

Когда я начал использовать Angular 2, у меня возникла идея, что основная причина создания компонентов заключается в том, что вы можете их повторно использовать. EG:

<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> 

И тогда я могу сделать некоторые конкретные 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

You может достичь этого, используя декоратор @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> 

Я старался, чтобы это было как можно проще, не стесняйтесь задавать вопросы, если у вас возникнут какие-либо проблемы.

Answer 2

Вы действительно не должны беспокоить написание специального 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

Answer 3

«Это можно сделать?»

Да! Это называется Заключение или содержание проекции и вы можете read about it in detail here.

Вот как:

В button.component.html:

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

Затем, когда вы положили содержимое внутри тегов для компонента, например: <custom-button id="display-bikes">bikes</custom-button>, Угловая 2 компилятор будет «проект» его в шаблон компонента между тегами ng-content. Поэтому в конечном итоге вы получите это во время работы:

<button> 
    bikes 
</button> 

Это просто простой пример. Вы можете стать очень продвинутым с ним и делать что-то вроде проектов других компонентов и иметь несколько выходов <ng-content>. Читайте об этом в блоге, указанном выше.

И тогда я могу сделать некоторые конкретные 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> 

Затем связать со свойством ввода в родительском следующим образом:

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

Есть другие способы применения стилей динамически, но это один является самым простым, учитывая, что есть только два класса.