So after further digging, I thought I had found a solution. Playing with the plunkr I was able to show that the right manual call to componentHandler.<something>
could address a similar issue I had managed to contrive in that plunkr.
However, the approach there (of creating a custom directive that triggered those calls on lifecycle events that the directive was attached to) didn't solve my issue. The "dynamic" nature of the router-outlet
was still interfering. As far as I can tell, the calls to componentHandler
were still premature and being done before the DOM had truly been updated by the router-outlet
.
What I eventually had to do was to add some code to the activate
method of RouterOutlet
. I was already creating a custom RouterOutlet
class, so it was simple enough to stick the code in the activate
method.
However, I found that is is essential that you wait until the Promise
associated with the activate
method is resolved. So I did something like this:
declare var componentHandler: any;
...
export class MyRouterOutlet extends RouterOutlet {
...
activate(instruction: ComponentInstruction) {
// My custom activate stuff (i.e., check that user is
// authorized to view this content)
// Important part, call base class...
return super.activate(instruction)
.then((x) => {
componentHandler.upgradeDom();
return x;
});
}
}
Update:
I have not confirmed it, but I suspect that the reason the other solutions I alluded to did not work was because of another issue I ran across. My suspicion is that addressing that issue properly would have allowed the other solutions I referenced here to work.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…