Angular 2 绑定值在路由时鼠标移动后才显示

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");
}

当我运行并单击指令显示的图标时，我在控制台中看到预期的消息："emitted"、"before nav"、"after nav"。但是在我移动鼠标之前，二级路由 ("name:task-pane") 不会更新新内容。

更新: 刚刚注意到：如果任务面板中的内容只是一个硬编码的字符串，那么它会立即显示出来。但是，如果我将内插绑定添加到任务窗格组件的属性（例如 {{Title}} ），那么任何硬编码文本 before 都会立即显示。直到我移动鼠标才会显示绑定文本和之后的任何硬编码文本。

面板组件如下：

@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

最后，如果我在我的父组件上放置一个 link 直接调用它的 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);

Angular 2 绑定值在路由时鼠标移动后才显示

Angular 2 bound values not shown until after mouse move when routing

angular2-directives

angular

angular-router