修改Angular 2指令中的兄弟DOM元素

我是Angular 2中DOM操作的新手。我試圖根據元素上的屬性值修改同級元素。修改Angular 2指令中的兄弟DOM元素

例如如果輸入包含必需的屬性，則在標籤上添加星號（星號）。

我有一個指令，它可以訪問輸入字段的屬性，&窗體控件。現在我想從這個指令中修改兄弟標籤。

我知道nativeElement & Renderer2基礎知識，但無法找到正確的方式訪問&修改兄弟。

<div class="form-group"> 
    <label for="email">Email address:</label> 
    <input type="email" class="form-control" id="email" required validate> 
    </div>

在我驗證指令，我想檢查是否需要屬性可在輸入，&如果是我想補充的同級元素即標籤類。

我可以使用ElementRef內部指令訪問輸入元素，但是如何訪問&修改標籤或任何其他相鄰元素，即子，父，兄弟。

這些基本操作的任何參考文件將是一個很大的幫助。

來源

2017-07-07 Rahul Bhooteshwar

您可以使用'@ ViewChild'和'@ ContentChild'綁定在模板中使用'＃templateName'來查找'ElementRef'。如果你分享一些有助於給出正式答案的示例代碼。 – cgTag

更新了問題。我知道使用ElementRef訪問元素。我想要使用這個控制兄弟dom元素，即我想要功能simillar到jquery prev（）函數.. –

它有什麼問題？如果你想使用jquery.prev – yurzui

關於required屬性，你可以在你的input指令選擇添加這樣的：

@Directive({ 
    selector: 'input[required]' 
})

對於<label>邏輯我將與JS嘗試在構造函數：

constructor(elementRef:ElementRef){ 
    let element = elementRef.nativeElement; 
    this.label = element.parentElement.querySelector('label[for="'+'element.id+'"]'); 
    \\ Now you can use this.label.classList to manage its classes

而且我對不起，我沒有找到另一種方式來做到這一點「角」！

來源

2018-02-22 14:40:41 PaulCo

修改Angular 2指令中的兄弟DOM元素

回答

相關問題