Sử dụng lại các thành phần trong Angular 2

Question

Khi tôi bắt đầu sử dụng Angular 2, tôi đã có ý tưởng rằng lý do chính để tạo ra các thành phần là vì bạn có thể tái sử dụng chúng. EG:

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

Đây có phải là lý do lớn để đi với góc 2 và các thành phần trong ứng dụng web và có thể thực hiện được không?

Tôi chưa tìm thấy tài nguyên nào trả lời cụ thể câu hỏi của tôi về cách thực hiện việc này.

Tôi muốn tạo nút và đầu vào, 2 phần tử html cơ bản và thường được sử dụng nhất và làm cho chúng có thể sử dụng lại được.

Tôi đã cố gắng tạo thành một nút và sử dụng lại nó.

Tôi cố gắng để sử dụng nó trong một template html như thế này:

<custom-button>some text</custom-button> 
<custom-button>different text</custom-button> 

Tuy nhiên các văn bản không hiển thị trên nút. Điều này có thể được thực hiện?

Một điều khác mà tôi tự hỏi là id html duy nhất khi thực hiện việc này. Tôi có thể thêm thuộc tính id html duy nhất cho từng trường hợp không?

lẽ thích:

<custom-button id="display-bikes">bikes</custom-button> 
<custom-button id="display-helmets">helmets</custom-button> 

Và sau đó tôi có thể làm một số css cụ thể bằng cách sử dụng id duy nhất của nguyên tố này?

Đó là tất cả những gì tôi muốn biết và cách thực hiện.

Tuy nhiên đây là phần còn lại của mã của tôi liên quan đến:

thành phần:

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

Bạn có thể đạt được điều này bằng cách sử dụng trang trí @Input. Bạn có thể đọc thêm về nó here.Thứ nhất, trong ButtonComponent của bạn, thêm một biến mà sẽ hiển thị tên nút, như thế này:

export class ButtonComponent { 

    @Input() buttonName: string; 

} 

Note: Bạn cần phải nhập khẩu Input trang trí: import { Input } from '@angular/core';

Sau đó, trong html sử dụng dữ liệu hai chiều ràng buộc (nội suy) để hiển thị giá trị nút:

<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle"> 
    {{buttonName}} 
</button> 

Và cuối cùng, khi bạn muốn hiển thị thành phần nút, bạn có thể đặt tên cho nút bằng một thuộc tính đơn giản giá trị:

<custom-button buttonName="First Button"></custom-button> 
<custom-button buttonName="Second Button"></custom-button> 
<custom-button buttonName="Third Button"></custom-button> 

Tôi đã cố gắng giữ điều này càng đơn giản càng tốt, vui lòng đặt câu hỏi nếu bạn gặp bất kỳ sự cố nào.

Answer 2

Bạn thực sự không nên làm phiền viết CSS cụ thể điều đó phụ thuộc vào ID của thành phần của bạn, điều này là không cần thiết.

Mỗi thành phần được đóng gói (theo mặc định). Việc đóng gói sử dụng Shadow DOM, hoặc một mô phỏng (mặc định). Đối với mỗi thành phần, bạn có thể chọn một trong các phương thức đóng gói 3:

• ViewEncapsulation.None - không có phong cách đóng gói
• ViewEncapsulation.Emulated - mặc định, sử dụng thuộc tính để "đóng gói" các phong cách
• ViewEncapsulation.Native - Sử dụng DOM bóng

đây là một bài viết trên blog tốt về chủ đề này: http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

Answer 3

"Điều này có thể thực hiện được không?"

Có! Nó được gọi là chuyển đổi hoặc chiếu nội dung và bạn có thể read about it in detail here.

Đây là cách:

Trong button.component.html:

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

Sau đó, bất cứ khi nào bạn đưa nội dung bên trong của thẻ cho các thành phần, như thế này: <custom-button id="display-bikes">bikes</custom-button>, các kiễu góc 2 trình biên dịch sẽ 'dự án' nó vào mẫu của thành phần nằm giữa các thẻ ng-content. Vì vậy, cuối cùng, bạn sẽ nhận được điều này khi chạy:

<button> 
    bikes 
</button> 

Đó chỉ là một ví dụ đơn giản. Bạn có thể thực sự tiên tiến với nó và làm những việc như dự án các thành phần khác và có nhiều cửa hàng <ng-content>. Đọc về điều đó tại blog được liên kết ở trên.

Và sau đó tôi có thể thực hiện một số css cụ thể bằng cách sử dụng id duy nhất của phần tử?

Ngoài ra, vâng ... mặc dù bạn sẽ không sử dụng thuộc tính id chuẩn.

On ButtonComponent của bạn:

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; 

    //... 
} 

Say button.component.css có hai lớp tên class-one và class-two.

Trong button.component.html:

<button [ngClass]="{class-one: styleId === 'applyClassOne', class-two: styleId === 'applyClasstwo'}"> 
    <ng-content></ng-content> 
</button> 

Sau đó, bạn liên kết với thuộc tính Input trong các phụ huynh như vậy:

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

Có nhiều cách khác của việc áp dụng phong cách năng động, nhưng điều này là đơn giản nhất mà chỉ có hai lớp để lựa chọn.