不明白我的模板设计出了什么问题

Question

我花了太多时间试图找到问题，但我没有。 我想刷新页面的顶部栏但是在执行其他帖子中写的内容时，我在页面中得到相同的行为：刷新所有页面，有时重复数据表。

这是我的代码：

所引用：

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

我想刷新包含的文件topbar.xhtml但我不能这样做因为所有的div都被刷新了。

在我的page.xhtml中我有这段代码：

 <h:head>
	<title>SI </title>
	<ui:insert name="head" />
	
</h:head>
<h:body>
	<div id="topbar">
		<ui:include src="topbar.xhtml" />
		<ui:debug hotkey="i"/>
	</div>
	<div id="layoutmenu">
	<ui:include src="layoutmenu.xhtml" />
    </div>
	<div id="error">
		<ui:insert name="error">
			<h:form id="formLayout">
				<p:growl id="growl" life="9000" autoUpdate="true" />
				<p:messages id="messages" showDetail="false" autoUpdate="true"
					closable="true" width="auto" height="auto"
					styleClass="ui-growl-item-container ui-state-highlight ui-corner-all ui-helper-hidden ui-shadow" />
				<p:dialog widgetVar="dialogWidget" resizable="true" width="100%"
					height="180">
					<p:panel>
						<h:outputLabel value="#{flash.exceptionMessage}" />
					</p:panel>
				</p:dialog>
			</h:form>
		</ui:insert>
	</div>
	<div id="layout-portlets-cover">
		
		<ui:insert name="body">
			<!-- Pages content goes here -->
		</ui:insert>

		<div class="Container100 TexAlCenter Gray FontAdamantiumRegular">
			<div class="EmptyBox10"></div>
			 All rights reserved.
		</div>
	</div>
</h:body>
</html>
	

这个项目已有5年历史，我没有创建这个页面，但我希望将其转换为正确的方法。 如果有人可以帮助我，我会非常感激。我花了超过2周的时间搜索解决方案并阅读帖子，但我没有发现问题。 感谢