Angular2：如何獲取子組件中的ViewChild的引用

我有一個包含另一個組件（Comp）的組件（App）。 App從數據庫獲取字符串內容並將其轉發@Input()至Comp。此字符串的內容可以包含類似Angular2：如何獲取子組件中的ViewChild的引用

Some text before <a>Click</a> Some Text after

在Comp這個內容應該被渲染和一些事件偵聽器都應該被加入HTML標籤。因此，使用[innerHtml]添加此內容。由於(click)在[innerHtml]中被刪除，因此需要引用a標記，並且應該將事件偵聽器與addEventListener一起添加。但我找不到方法來引用a標記，因爲組件ElementRef不包含nativeElement。

運行此運行程序的最佳方法是什麼？ https://plnkr.co/edit/xVUu0LJ02YVnBO25Zr4j?p=preview

來源

2017-03-03 Thomas Sablik

直接DOM訪問是d鼓勵Angular2

這是一個hacky的方式來做到這一點，直接dom訪問。

定義子補償的事件偵聽器和過濾事件：

document.querySelector('body').addEventListener('click', function(event) { 
     if (event.target.tagName.toLowerCase() === 'a') { 
     that.updateCounter.next(true); 
     } 
    });

然後使用EventEmitter以更新計數器。

Plunker：https://plnkr.co/edit/vm44niH781j4mEQHDpLU?p=preview

來源

2017-03-03 13:17:22 echonax

在Angular2中，您希望使您的嵌套組件僅與其直接父/子通信。

您可以在組件「Comp」中爲您的「a」標籤創建點擊處理程序。

在你的組件比較，你可以創建一個@Output（）變量（基本上是一個EventEmitter），你會在你單擊處理

火在主應用程序組件，您可以收聽到您的新EventEmitter和處理事件。

例如：

在比較

：

@Output myClickEventEmitter: EventEmitter 

aTagClickHandler (e) { 
    myClickEventEmitter.emit(e) 
}

在應用程序模板應用程序組件

：

myCompClickHandler(e) { 
    console.log(e); 
}

我希望我的語法是正確的^ h這個，它有幫助。

編輯：

你也應該能夠使用#variableName屬性引用一個內部組件在你的標籤像：

模板

：

<a #variableName > </a>

在組件：

@ViewChild('variableName') myATag;

來源

2017-03-03 13:02:49 Pac0

正如我所說的，內容來自外部數據庫。我無法編輯'a'標籤。事件處理非常通用，取決於組件的使用位置。因此，有必要事件來自'App'而不是來自'Comp' –

好吧，抱歉誤會了您的要求。你可以看一下@echonax的答案，但是，正如他所說的，「在Angular2中（直接DOM訪問被（強烈）阻止」）。對於代碼的「清潔」，還有性能和副作用問題。也許如果你的字符串足夠正常，你可以重寫html？可能是值得的。 – Pac0

此項目也強烈建議不要直接訪問DOM，所以我必須找到另一種方式。目前我試圖將視圖公開給父組件。 –

Angular2：如何獲取子組件中的ViewChild的引用

回答

相關問題