Question

我有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' }

    ]}
    ])],

我想使用*ngIf="router.url == 'path'实现这一目标，但是我不知道在path中给出路径的方法

Answer 1

有几种方法可以做到，其中一种如下...

我想您有显示您的div的CSS代码假设您的班级名称为 .displayDiv ，则该班级仅在您的URL正确时才会命中。 http://localhost:3000/admin/questions/(questions:preview/5cb18f686560a2f98b43f8e0)

QuestionPreviewComponent的component.ts文件上，您必须像下面那样获取变量...

pathName: any;

在

ngOnInit() {
this.pathName = location.pathname.split('/');
}

QuestionPreviewComponent的HTML文件上

<div [ngClass]='pathName[2] === questions ? "displayDiv" : ""'>
------------------
------------------
Your code
-----------------
-----------------
</div>

您可以准备其他条件或添加隐藏CSS

隐藏和显示特定路径上的div

1 个答案: