根据条件停止出现 Mat 对话框答案

【问题标题】：Stop Mat Dialog from appearing based on condition根据条件停止出现 Mat 对话框
【发布时间】：2021-04-09 02:05:34
【问题描述】：

如果未满足特定条件，我希望不显示Mat Dialog。我曾希望使用 Angular Guard，但似乎没有与组件关联的路由（除了调用它的总体网页）。
[因此，我曾希望它属于canActivateChild - 但这阻止了整个页面的加载。 ]

我已经回滚了我的示例，只是试图阻止基于 FeedBackGuard 组件（现在只返回 false）访问特定组件（'give-feedback'）。

反馈组件由页面/example 上的函数调用。我尝试过设置 canActivate（针对组件）、canActivateChild（作为example 页面的子集）、设置 canLoad 以及其中的多个变体。
到目前为止，我只成功阻止了 example 的加载，但没有成功阻止为 give-feedback 启动的 Mat Dialog

目前app-routing.module.ts中的配置是：

{path: 'Example', component: ExampleComponent,
  canActivateChild : [FeedbackGuard],
      children: [
      {  path: 'feedback-example', component: MatDialog  },
      {  path: 'feedback-example', component: GiveFeedbackComponent  }
      ] 
},

【问题讨论】：

标签： angular angular-router-guards

【解决方案1】：

我曾希望使用 Angular 的 Guard 功能来做到这一点。我见过一些人只是不加载“孩子”的例子。我为此尝试的任何内容都会阻止整个页面，例如阻塞 Mat Dialog 或 GetFeedbackComponent。

因此，我只是使用*ngIf 来检查某个值，设置一个布尔变量，如果布尔值为真，则只显示相应的反馈链接/按钮。

在 HTML 中：

 <div *ngIf="(booleanVariable)"> 
       <td (click)="giveFeedback()"> Give feedback </td>
    </div>

在component.ts中：

this.http.get('/variableinfo/').subscribe(data => {
       const varInfo = Object.keys(data).map(key => data[key]);
       this.booleanVariable = varInfo[0][0].name;
        }

【讨论】：