动态更新froala工具栏图标

时间:2019-01-09 06:49:03

标签: angular toolbar froala

在我的angular应用程序中,有一个下拉列表和一个froala编辑器。根据下拉菜单的选择,froala编辑器的工具栏图标应更新。请参见下面的代码

froala.component.html

        <select  [(ngModel)]="selectedType" (change)="customizeEditorButtons()" > 
         <option value="1"> Option 1 </option> 
         <option value="2"> Option 2 </option> 
        </select>


<textarea [froalaEditor]="editorOptions" [(froalaModel)]="froalaContent"></textarea>

froala.component.ts

this.editorOptions = {
   toolbarButtons: this.toolBarbuttonsModified
}

 public customizeEditorButtons(){
  this.toolBarbuttonsModified = [ 'redo' , '-', 'bold', 'italic'];
}

customizeEditorButtons()函数不会更新froala编辑器,因为它已在init上呈现。那么,如何动态地更新工具栏图标呢?

1 个答案:

答案 0 :(得分:0)

我已经找到解决方案。更改下拉菜单后,销毁当前实例,然后使用新的工具栏按钮再次对其进行初始化。

create table #dept(emp_id int, emp_dept varchar(30))
create table #emp(emp_id int, emp_name varchar(30))
create table #salary(emp_id int, salary int)

insert into #dept values(1,'HR'), (2,'HR'), (3,'Finance')
insert into #emp values (1, 'Venkat'), (2,'raman'), (3, 'Murugan')
insert into #salary values(1, 5000), (2, 10000), (3, 20000)

select emp_dept, emp_id, emp_name
from
(
select d.emp_dept,d.emp_id, e.emp_name, Row_Number() over (partition by d.emp_dept order by s.salary desc) as rnk
from #Dept AS d
LEFT JOIN #Salary AS s
ON d.emp_id = s.emp_id
LEFT JOIN #emp AS e
ON d.emp_id = e.emp_id
) as t
where rnk = 1

另外,初始化应该是手动的。