Angular 5花括号问题

Question

After upgrading my app from angular v2 to v5, I faced some strange behavior with templates curly braces. If template element uses curly braces - nothing would be displayed without any console errors. For example:

<span>{{ 1 + 1 }}</span>
<span>{{ 'Test' }} test</span>
<span>Test</span>

would be rendered to

<span></span>
<span></span>
<span>Test</span>

There are no errors in console and existing component functions binded on (click) works perfectly normal. I really would be grateful for some hint or direction - what can cause such behavior

some thoughts: I guess it's somehow related to router-outlet, cause outside of component, template renders as expected

---

Update: I don't know what exactly the problem was, but the it is definitely related to angular Router. I came out with 2 possible solutions: 1) Downgrading angular to v 4.1 2) Wrapping this.router.navigate method into this._ngZone.run(() => { }) So when using

this._ngZone.run(() => { this.router.navigate(['/app']) });

template renders as expected. Still would be great to know what was wrong with the original code.

Answer 1

我尝试这段代码并获得完美的输出。

2 Test test Test