javascript - 根据用户选择的角度动态替换主要组件内容
问题描述
我的 Angular 项目中有一个主要组件,应该根据用户从组件 user.summary.component 中选择的所有其他组件的数据进行更新和替换。我的主要组件位于页眉和页脚之间,我有一个名为 user.summary.component 的左侧导航,用户可以在其中选择他的个人资料信息、卡信息、帐户偏好、订单。
当用户从 user.summary.component 选择配置文件信息时,我的主要组件应该使用配置文件信息详细信息进行更新。同样,卡信息、账户偏好和订单信息应替换主要组件内容。
我的 main.component.html 看起来像这样:
<p>
main-body loaded!
</p>
<!-- multi slot transclusion here -->
<ng-content select="[body-content]"></ng-content>
<ng-content select="[body-header]"></ng-content>
<ng-content select="[body-footer]"></ng-content>
当用户从 user.summary.component 中选择 profile.information 链接时,profile.information.component 应该替换主组件模板内容:
<app-main-body>
<h4 body-content> profile info body content here</h4>
<h4 body-header> profile header here</h4>
<h4 body-footer> profile footer here</h4>
</app-main-body>
当用户从 user.summary.component 中选择 account.preferences 链接时,account.preferences.component 应该替换主组件模板内容:
<app-main-body>
<h4 body-content> account preferences body content here</h4>
<h4 body-header> account preferences header here</h4>
<h4 body-footer> account preferences footer here</h4>
</app-main-body>
我已经浏览了该博客上的几篇文章,并且能够弄清楚如何将数据从组件传递到另一个组件,但无法弄清楚如何替换主要组件内容并根据用户选择注入模板。
解决方案
我不确定我是否理解您的问题,但这里有两种方法可以实现这一点。
1) 使用带有 *ng-if 的组件
2)使用路由
但是对于这两种方法,您需要为个人资料信息、卡信息、帐户首选项和订单中的每一个创建单独的组件。
如果您想使用 *ng-if 执行此操作,请执行以下操作。
main.component.html
<user.summary [onSectionChange]="changeSection($event)"></user.summary>
<profile.info *ngIf="selected == '1'"></profile.info>
<card.info *ngIf="selected == '2'"></card.info>
<account.pref *ngIf="selected == '3'"></account.pref>
<orders *ngIf="selected == '3'"></orders>
主要组件.ts
selected: number = 1; // show profile.info by default
...
onSectionChange(section: number) {
this.selected = section;
}
user.summary.component.ts
...
onSelectView(option: number) {
this.onSectionChange.emit(option);
}
推荐阅读
- python - 在熊猫中将月份从数字重命名为名称
- flutter - RedirectException:检测到重定向循环
- assembly - 为什么这个汇编程序两次输出相同的字符串?
- javascript - 如何将 json 数组转换为具有特定属性的 CSV 数据
- c - 我如何用c读取这个格式化的文本文件?
- python-3.x - 无法在 Turicreate 中导出 Core ML 模型
- r - 如何在 R 中使用 ggplot 将单点添加到多线图中?
- node.js - 从 JS 中的 SUM 函数获取列名
- eclipse - lombok:找不到符号:使用 gradle 构建失败
- azure - 从 Azure Log Analytics 导出日志