2

我有一个指令，它为它添加到的任何元素添加一个图标。单击该图标时，我需要在包含该指令的任何组件中调用一个函数。此函数用于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”。但是在我移动鼠标之前，辅助路由（“名称：任务窗格”）不会更新为新内容。

更新：刚刚注意到这一点：如果任务窗格中的内容只是一个硬编码的字符串，那么它会立即显示。但是，如果我将插值绑定添加到任务窗格组件的属性（例如 {{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函数（指令发出时调用的函数相同），那么一切正常 - 所有文本（硬编码和绑定）立即显示。

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

谢谢！

4

1 回答 1

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);
于 2017-08-22T00:45:40.017 回答