Question

我有一个指令，它将图标添加到添加到的任何元素中。单击该图标时，我需要在包含该指令的任何组件中调用函数。此函数使用router.navigate将命名插座导航到新组件。一切正常，只有在我点击图标后，指定路由器插座的新内容才会显示，直到我移动鼠标。

以下是该指令的相关部分：

@Directive({
    selector: '[editable]',        
})
...    
@Output() doEdit = new EventEmitter<string>();
...
private emitEditMessage(){
        console.log("emitting");   <-----just so I can see that the function is called
        this.doEdit.emit(this.targetField);
}

这是我在模板中使用指令的地方：

<span editable (doEdit)="editField($event)">
    {{CurrentPersonInfo}}                              
</span>

以下是我的父组件中的函数，该函数在指令发出时调用：

public editField(fldName :string){
    console.log("before nav");
    this.router.navigate([{ outlets: { 'task-pane': 'edit' } }]);
    console.log("after nav");
}

当我跑步并点击指令显示的图标时，我在控制台中看到了预期的消息：“发出”，“导航前”，“导航后”。但是在我移动鼠标之前，辅助路径（“名称：任务窗格”）不会使用新内容进行更新。

更新：注意到这一点：如果任务窗格中的内容只是一个硬编码字符串，则会立即显示。但是，如果我将插值绑定添加到任务窗格组件的属性（例如{{Title}}），则绑定之前的任何硬编码文本会立即显示。绑定的文本和之后的任何硬编码文本在我移动鼠标之前不会显示。

以下是面板组件：

@Component({ ... }) export class PersonEditPanelComponent extends BasePanel{ constructor(){ super(); console.log("panel ctor"); } public Title: string = "Edit Person" }

以下是面板模板HTML：

This shows immediately. {{Title}} This and the "Title" won't show until I move the mouse after clicking the icon

最后，如果我在父组件上放置一个直接调用其editField函数的链接（当指令发出时调用的那个），那么一切正常 - 所有文本（硬编码和绑定）显示立即

所以，我的问题：路由中是否存在导致绑定解决的延迟？知道如何解决这个问题吗？

谢谢！

Answer 1

解决。我采用了一种不同的方法来附加事件监听器并使其全部正常工作。以下是详细信息：

通过我的指令上的构造函数注入Renderer2：

constructor(elem: ElementRef, private renderer: Renderer2, private router: Router)
{}

然后在将图标添加到页面中的代码之后，我附加了这样的监听器：

this.renderer.listen(this.editIcon, 'click', (evt) => {
    this.doEdit.emit(this.targetField);
});

editIcon是我创建并添加的DOM元素：

    private editIcon = document.createElement('a');
    this.editIcon.innerHTML = '<i class="fa fa-pencil" aria-hidden="true" style="font-size:18px; color:red;"></i>';
    node.appendChild(this.editIcon);

路由

1 个答案: