如何使角度2中的样式css实时重新加载

Question

在我的角度2应用项目中， 我们使用具有以下结构的app.component.html：

<header>
    <div id="landing-content" style="display:none;">
       some content here
    </div>
</header>
<div class="">
  <router-outlet></router-outlet>
</div>
<footer>
</footer>

然后，我有2个文件登陆页面＆amp;使用app.component继承布局的product-page。正如所料，我希望标题中的＃landing-content div显示在登录页面中，而其他页面则不显示。 以下是这些文件的内容： file：landing-page.component.ts ...

@Component({
  selector: 'landingPage',
  styleUrls: ['./landing-page.component.css', './blog.css'],
  templateUrl: './landing-page.component.html',
  encapsulation: ViewEncapsulation.None
})
....

文件landing-page.component.css：

#landing-content {
  display : inherit !important;
}

文件article-page.component.ts：

@Component({
  selector: 'articlePage',
  styleUrls: ['./article-page.component.css'],
  templateUrl: './article-page.component.html'
})
...

文件article-page.component.css

#landing-content {
  display : none !important;
}

我的问题是：如果我点击文章链接从登陆页面重定向到页面文章，＃landing-content仍会显示，虽然我为此设置了css是display：none;当我在浏览器中刷新文章页面时，这只是隐藏的。 所以看起来css不会立即以角度2重新加载。我该如何解决这个问题？ 感谢。