Angular 2 innerHTML（點擊）綁定

我有這麼大的HTML菜單，我決定綁定到能夠做出幾個子菜單下拉菜單，並避免重複html代碼。父項>子項（也就是父項）>子項...Angular 2 innerHTML（點擊）綁定

對於上下文：在ng2_msList/msList.components.ts中，ColumnsManagements.ts作爲this.ColumnsManagementInstance導入。的innerHTML菜單顯示正常，在ng2_msList /頁/ list.html：

<!-- COLUMNS DROPDOWN BUTTON --> 
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul>

隨着（在我的代碼非常簡化版本）：（感謝這個Stack Q）

setHtmlColumnsMenu() { 
    var self = this; 
    var htmlcolumnsmenu = ''; 
    [...] 
    htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true)); 

    // which return something like a lot of html content and sometime in it : 
    // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)"> 
    [...] 
    return htmlcolumnsmenu; 
}

但（點擊）=「msList.ColumnsManagementInstance.toogleColumn（列）」（之前在html內容中）不再有效。它在視圖中以標記中的簡單文本（在innerHtml未顯示之前）寫入。

我無法達到使其再次工作的方式。我測試了多種調用函數的方式，或者我在網頁鏈接中找到的例子如Ang Doc Section，here。這些示例非常簡單地調用一個在同一個文件/上下文中設置的函數（點擊）=「MyAction（）」，但是使用我的上下文我無法正確調用它。

應用程序架構可能不像Angular2的點擊呼叫所期望的那樣。

來源

2016-06-07 Paul Leclerc

這是設計。 Angular不以任何方式處理由[innerHTML]="..."（衛生除外）添加的HTML。它只是傳遞給瀏覽器，就是這樣。

如果要動態添加HTML包含你需要用它在Angular2組件綁定，那麼你可以使用例如ViewContainerRef.createComponent()

將其添加爲一個完整的例子看Angular 2 dynamic tabs with user-click chosen components

一個不太Angulary方法是將注入ElementRef，訪問使用

elementRef.nativeElement.querySelector('a').addEventListener(...)

來源

2016-06-07 10:28:47

我們需要聽到的是並不總是我們希望聽到：/ 謝謝你，這當然是我需要的，甚至意味着我錯了;）接受！ –

它可能爲時已晚，但讓我希望是要幫助別人添加的HTML。

既然你想點擊綁定（也可能是其他綁定），這將是更好的使用和[innerHTML]="..."創建內部構件到您通過@Input()註釋傳遞數據跳過。

具體，形象，你有一個名爲BaseComponent在其中設置一些HTML代碼的變量htmlData組件：在BaseComponent的HTML文件時，

let htmlData = '...<button (click)="yourMethodThatWontBeCalled()">Action</button>...'

然後將其綁定象下面這樣：

...<div [innerHTML]="htmlData"></div>...

而不是做這個的，爲您打造InnerComponent。TS：

@Component({ 
selector: 'inner-component', 
templateUrl: './inner-component.html', 
styleUrls: ['./inner-component.scss'] 
}) 
export class InnerComponent { 
    @Input() 
    inputData: any; 

    methodThatWillBeCalled(){ 
    //do you logic on this.inputData 
    } 
}

InnerComponent的HTML文件：現在

...<button (click)="methodThatWillBeCalled()">Action</button>...

在BaseComponent的HTML文件：

...<inner-component [inputData]="PUT_HERE_YOUR_DATA"></inner-component>

來源

2018-01-30 14:29:10 Mitchapp

Angular 2 innerHTML（點擊）綁定

回答

相關問題