Question

所以我有这样的html文件设置。我希望我可以以某种方式按下选项“ Heatmap”，然后在mat-sidenav-content中显示app-heatmap。做这样的事情的最佳实践是什么？人体检测和热图均被创建为自己的组件。因为它们完全不同。任何人都有一些提示或解决方案吗？

<div [class.alternative]="otherTheme">
    <mat-toolbar color="primary">
            <mat-toolbar-row width="6">

                    <mat-button-toggle mat-icon-button [routerLink]="''">
                        <mat-icon>home</mat-icon>
                    </mat-button-toggle>
            <a [routerLink]="''">
                <img style="background-image: url('assets/images/white-logo.svg')"> 
            </a>
             <h1>My app</h1>
              <span class="fill-remaining-space"></span>
              <mat-form-field>

                <select matNativeControl required>
                  <option value="peopledetection">People detection</option>
                  <option value="heatmap">Heatmap</option>
                </select>
              </mat-form-field>
              <mat-button-toggle mat-icon-button (click)="sidenav.toggle()">
                    <mat-icon>info</mat-icon>
                </mat-button-toggle>


                <mat-button-toggle mat-icon-button (click)="settings.toggle()">
                    <mat-icon>more_vert</mat-icon>
                </mat-button-toggle>
            </mat-toolbar-row>


          </mat-toolbar>

          <mat-sidenav-container>
              <mat-sidenav #settings mode="side">
                <mat-nav-list>
                    <h4>platform settings</h4>
                    <div mat-list-item>
                    <label>dark/light</label>
                    <mat-slide-toggle mat-list-item
                        (click)="changeTheme()"
                        class="example-margin"
                        [color]="color"
                        [checked]="checked"
                        [disabled]="disabled"
                        >

                    </mat-slide-toggle>
                    </div>
                    <div mat-list-item>
                    <label>Settings</label>
                    <mat-slide-toggle
                        class="example-margin"
                        [color]="color"
                        [checked]="checked"
                        [disabled]="disabled">
                    </mat-slide-toggle>
                    </div>
                    <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
                    <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
                    <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
                    <h4>App specific settings</h4>
                    <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
                    <a mat-list-item [routerLink]="'/activities'"> Activities </a>
                    <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
                    <a mat-list-item (click)="settings.toggle()" href="" mat-list-item>Close</a>

                </mat-nav-list>
              </mat-sidenav>
              <mat-sidenav #sidenav mode="side" position="end">
                    <mat-nav-list>

                      <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
                      <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
                      <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
                      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

                    </mat-nav-list>
                  </mat-sidenav>
              <mat-sidenav-content>

                     <app-peopleactivity></app-peopleactivity>
             <app-heatmap></app-heatmap>
              </mat-sidenav-content>
            </mat-sidenav-container>



        </div>

Answer 1

如果要在通过选择控件选择的组件之间“切换”，则可以使用模板逻辑。将select的值绑定到属性，然后将该属性值用作您的sidenav内容组件的条件：

<select matNativeControl required [(ngModel)]="selectedComponent">
    <option value="peopledetection">People detection</option>
    <option value="heatmap">Heatmap</option>
</select>

...

<mat-sidenav-content>
    <app-peopleactivity *ngIf="selectedComponent==='peopledetection'"></app-peopleactivity>
    <app-heatmap *ngIf="selectedComponent==='heatmap'"></app-heatmap>
</mat-sidenav-content>

在Angular / material中，如何使用select元素更改<mat-sidenav-content>标记中显示的内容？

1 个答案: