Связанные значения Angular 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");
}

Когда я запускаю и нажимаю на значок, показанный директивой, я вижу в консоли ожидаемые сообщения: «испущено», «до навигации», «после навигации». Но вторичный маршрут («имя: панель задач») не обновляется с новым содержимым, пока я не передвину мышь.

Обновление. Только что заметил: если содержимое панели задач представляет собой просто жестко закодированную строку, то оно отображается сразу. Однако если я добавлю интерполированную привязку к свойству компонента панели задач (например, {{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 (та же самая, которая вызывается при испускании директивы), тогда все работает — весь текст (жестко закодированный и связанный) отображается немедленно.

Итак, мои вопросы: есть ли что-то неотъемлемое в маршрутизации, вызывающее эту задержку для разрешения привязок? Есть идеи, как это исправить?

Спасибо!


angular angular2-directives angular-router
person TimTheEnchanter    schedule 21.08.2017    source источник
comment
Спасибо, но это ничего не изменило. Все те же результаты.   -  person TimTheEnchanter    schedule 22.08.2017
comment
вы видели этот пост: stackoverflow .com/questions/38793490/   -  person Vega    schedule 22.08.2017
comment
Я только что взглянул на это и попытался загрузить библиотеки, и это ничего не изменило.   -  person TimTheEnchanter    schedule 22.08.2017
comment
Чего я не понимаю, так это почему это работает, когда я вызываю функцию навигации из ссылки на странице, но не когда та же функция вызывается из ссылки, добавленной динамически.   -  person TimTheEnchanter    schedule 22.08.2017
comment
Re: порядок библиотек... да, пробовал в указанном порядке.   -  person TimTheEnchanter    schedule 22.08.2017
comment
Не могли бы вы проверить правильность настройки polyyfils.js?   -  person Vega    schedule 22.08.2017
comment
Можно ли поставить навигацию маршрутизатора внутри тайм-аута?   -  person Vega    schedule 22.08.2017
comment
Я выбрал другой подход и у меня все получилось. Я опубликую ответ через мгновение. Но спасибо за помощь.   -  person TimTheEnchanter    schedule 22.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Решено. Я использовал другой подход к подключению прослушивателя событий, и все заработало. Вот подробности:

Введено 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);
person TimTheEnchanter    schedule 22.08.2017