Question

我已经在angular2中创建了示例应用程序，当管理员登录该应用程序并从AdminComponent的下拉列表中选择所需的机构并导航到该应用程序时。

我要在此处动态生成包含所选机构的URL。

请访问我的示例应用程序here

在我当前的情况下，当管理员登录并选择所需的机构并导航到应用程序时，URL是此类。......

**http://localhost:4200/application/home**

但是我希望此URL是使用URL中选定的机构名称动态生成的。

例如：如果所选机构是 Arizona-ARP ，则导航到主页时的URL类似于....

**http://localhost:4200/Arizona/application/home**

有人可以根据需要帮助我构建示例应用程序吗？？

Answer 1

请检查此stackblitz以获得有效的代码

@Chuchu部分完成了工作。但此外，您需要在路由配置中定义动态URL。像下面一样

  {path:'Admin/Apollo/application/home',component: HomeComponent},
                           {path:'Admin/Arizona/application/home',component: HomeComponent},
                           {path:'Admin/Adventing/application/home',component: HomeComponent},
                           {path:'Admin/Trustling/application/home',component: HomeComponent},
                           {path:'application/home',component: HomeComponent},

Answer 2

检查此示例https://stackblitz.com/edit/role-based-authentication-5bfzmy

我在模板中编辑您的代码

<mat-form-field floatPlaceholder="never">
    <mat-select style="min-width: 200px;" placeholder=" Institution " [(ngModel)]="institute" name="institute">

    <mat-option *ngFor="let ins of options" [value]="ins.InstituteName" >
                {{ ins.InstituteName}}-{{ ins.typ}}
    </mat-option>
    </mat-select>
</mat-form-field>

...

routerLink='{{institute}}/application/home'

在按钮

中

在ts

institute: string;
options: any;
this.options = data;

在stackblitz的示例中，当您进行更改时，请选择链接按钮更改，但单击按钮时会出现控制台错误。

无法从mat-form-field提取所选选项以在angular2

2 个答案: