不要使用Angular 4触发对子组件的更改检测

Question

在我们的Angular 4应用程序的主模板中，它是一种＆＃39; root＆＃39;模板。它包含页面内容区域的容器元素和侧边的侧边栏。

除了旧浏览器（我们的客户是非常大的公司，只有旧的IE浏览器，所以我们必须支持IE10和IE11），应用程序真的没有响应（在UI更新和css过渡帧率。）

我注意到的一件事是，即使我依赖于纯粹在主应用程序组件范围内的更改检测，它也会触发并执行所有子组件的所有模板代码（4次，事实上。）

这是我模板的主要部分：

    <div class="page-content sidenav-open" id="page-content" #pageContent (window:resize)="adjustMainContent()">
        <div [class]="'sidenav ' + (isAnimating ? 'isanimating' : '')" [style.width.px]="sidebar.width" [style.marginLeft.px]="sidebar.isVisible ? 0 : -sidebar.width">
            <div class="vertical-resize-bar" (mousedown)="dragStart($event)"> </div>
            <div class="sidenav-widget search-widget">
                <app-navigation>Loading navigation...</app-navigation>
            </div>
        </div>
        <div [class]="'main-content ' + (isAnimating ? 'isanimating' : '')" (transitionend)="isAnimating = false" [style.width.px]="mainContentWidth">
            <router-outlet></router-outlet>
        </div>
    </div>

同样，从功能上来说，它的效果非常好（在Chrome和Firefox等等），但不适用于较旧的浏览器/计算机。我只是希望我的模板片段中的那些变量不会触发app-navigation组件及其子组件以及任何组件加载到路由器插座中的更改检测。

我在做什么（或多件事）明显错了吗？我应该提一下，这是我们的第一个Angular应用程序。