如何正確模塊化Angular 4 w /可定製？

我想弄清楚如何創建可以從調用組件定製的組件。舉個例子，我想建立一個文本輸入文本框稱爲可傳遞之類的東西通過以下方式最大長度，驗證的消息[]等：如何正確模塊化Angular 4 w /可定製？

<textbox maxlength="40" validation-messages="['This field is required','This field is too long']></textbox>

而對於textbox.component模板會看起來是這樣的：

<label for...></label> 
<input ... /> 
<div *ngIf="field.invalid && (field.dirty || field.touched)"> 
<div [hidden]="field.errors.required"> 
<!--validation messages here--> 
</div></div>

我一直在試圖做到這一點了幾天，但似乎無法得到它的工作完全正確。使用指令只會導致死鎖（例如，從指令中更改innerHTML會導致* ngIf無法正常工作，並且無論使用哪個生命週期鉤，驗證消息總是存在），並且據我所知，服務不能用來從調用HTML發送數據到接收組件，但我需要能夠從調用者發送變量到文本框來改變文本框的模板並保持模塊化。

如果有人知道完成類似上述的正確方法，請讓我知道。提前致謝。

來源

2017-08-10 app1001

你試過了什麼？你可以做一個plunkr嗎？作爲一個基地，你可以使用以下plnkr：https://plnkr.co/edit/fd7IHe4SGizzPPyNlDU9 – DOMZE

這是我最接近時的基礎知識：[link]（https://plnkr.co/edit/ZMcE0hC8NmAMRzByFVP0 ？p = info）不起作用（可能是路徑和缺少的樣式），但它可以讓你瞭解我希望工作的內容。 @DOMZE – app1001

我修復了你的plunk，這樣它可以讓其他人看到，這樣它就可以編譯https://plnkr.co/edit/kZIJuJC5CCcD4OeNwtWW你想完成什麼？你最終的目標是什麼？ – DOMZE

找到了答案。這是在this article。簡而言之，使用指令格式，但只需在組件文件中包含@Input。像這樣：

調用組件：

<textbox [maxlength]="40" [validation-messages]="['This field is required','This field is too long']></textbox>

含有該成分（Textbox.component.ts）：

@Input validation-messages: string[]; 
@Input maxlength: number;

這樣你就可以與輸入直接從component.ts文件工作，有條件地從那裏格式化component.html文件。

來源

2017-08-14 16:59:36 app1001

如何正確模塊化Angular 4 w /可定製？

回答

相關問題