angular - 仅在特定路径上显示 div
问题描述
我有 div,我需要在特定(如下所述)路径上显示它。提前致谢。
小路
{ path: 'preview/:questionid', component: QuestionPreviewComponent, outlet: 'questions' }
http://localhost:3000/admin/questions/(questions:preview/5cb18f686560a2f98b43f8e0)
路由模块
imports: [RouterModule.forChild([
{ path: '', redirectTo: 'questions', pathMatch: 'full'},
{ path: 'questions', component: QuestionsComponent, children: [
{ path: '', component: QuestionListComponent, outlet: 'questions' },
{ path: 'bulk-upload', component: BulkUploadQuestionsComponent, outlet: 'questions' },
{ path: 'new', component: NewEditQuestionComponent, outlet: 'questions' },
{ path: 'edit/:id', component: NewEditQuestionComponent, outlet: 'questions' },
{ path: 'preview/:questionid', component: QuestionPreviewComponent, outlet: 'questions' }
]}
])],
我试过了,但没有用。
<div style="margin-left:3% ;" *ngIf="router.url == 'questions/preview/:questionid'">
.....code.....
</div>
解决方案
您需要从中获取questionid
,ActivatedRoute
然后在您的*ngIf
条件下使用它
questionid: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.questionid = params['questionid']; // Save Question Id in a variable
});
}
在您的模板中使用上述变量。
<div style="margin-left:3% ;" *ngIf="router.url == ('/admin/questions/preview/' + questionid)">
.....code.....
</div>
推荐阅读
- python - Python + Excel + OLEDB Oracle - 数据刷新时如何传递数据库密码?
- javascript - 使用在 chrome 扩展上传递的函数消息中的值
- networking - 可以从现有 pod 中的不同子网添加管理 IP 范围
- postgresql - Postgres 检查约束定义
- python - Keras - Hyper Tuning 模型的初始状态
- testing - Visual Studio Code 在 Cypress 中显示很多错误
- javascript - TypeError:无法定义属性“x”:对象不可扩展
- java - Spring boot 自动装配外部依赖项以及更多可选依赖项
- php - EasyAdmin 3 - 具有嵌套形式的 CRUD
- android - 禁用TextField中标签的向上移动动画(Jetpack compose)