Question

我正在使用Angular Material构建Angular 7网站（我是Web开发人员中的新手）。我陷入了一件看起来很琐碎的事情：在我的products.component中，我想使用Angular Material Button Toggle在产品的网格视图（默认）和列表视图之间切换。我们在众多电子商务中看到的功能。这是我的简化代码：

<mat-button-toggle-group value="grid">
    <mat-button-toggle value="grid">
        <mat-icon>view_module</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="list">
        <mat-icon>view_list</mat-icon>
    </mat-button-toggle>
</mat-button-toggle-group>

产品的网格视图（必须是默认视图）：

<div *ngFor="let product of products">
    <a>
       ...
    </a>
</div>

产品的列表视图：

<div>
    <ul>
        <li *ngFor="let product of products"></li>
    </ul>
</div>

我已经尝试过使用ViewChild，NgModel，NgSwitch，TemplateRef，各种解决方案...我缺少了一些东西，我花了很多时间在此上，所以我依靠你！预先感谢

编辑：未实施路由，我的app.component如下：

<app-header>
<app-products>
<app-footer>

我的products.component的构建方式如下（简化）

<mat-toolbar>
    <mat-button-group>
    ...
    </mat-button-group>
</mat-toolbar>
<div class="container">
    <div *ngFor="let product of products">
        <a>
        ...
        </a>
    </div>
    <div>
        <ul>
            <li *ngFor="let product of products">
            ...
            </li>
        </ul>
    </div>
</div>

所有这些都在一个组件中。为网格视图创建两个子组件，列表就不行了，对吧？无论如何，我都尝试通过将代码移到div.container中另一个我尝试过的组件中来

@Component({ 
templateUrl:
`
    <div #listTemplate>
      <p>List View</p>
    </div>

    <div #gridTemplate>
      <p>Grid View</p>
    </div>
`
})
export class ... {
    @ViewChild('listTemplate') listTemplate: TemplateRef<any>;
    @ViewChild('gridTemplate') gridTemplate: TemplateRef<any>;
}

但是我无法通过单击按钮切换将其绑定。 Material Button Toggle在单击时发出更改事件，因此应该让我使用ngModel。我已经尝试过这样的事情：

<mat-toolbar>
    <mat-button-group>
        <mat-button-toggle (click)="change(view.value)">...</mat-button-toggle>
        <mat-button-toggle (click)="change(view.value)">...</mat-button-toggle>
    </mat-button-group>
</mat-toolbar>
<div class="container">
    <div *ngFor="let product of products" [(ngModel)]="grid" #view>
        <a>
        ...
        </a>
    </div>
    <div [(ngModel)]="list" #view>
        <ul>
            <li *ngFor="let product of products">
            ...
            </li>
       </ul>
    </div>
</div>

但是不知道如何使用change（value）插入适当的模板。 ngTemplateOutlet可能是一个合适的解决方案，但我还没有尝试过。显然，我对Angular的功能缺乏了解，但是我已经成功实现了网站中的其他功能，因此我想实现这一功能。

Answer 1

以下是“切换”按钮的工作示例：https://stackblitz.com/edit/angular-rlnalw

<mat-button-toggle-group [value]="toggle" (change)="toggleView($event)">
  <mat-button-toggle [value]="true">
      Grid
  </mat-button-toggle>
  <mat-button-toggle [value]="false">
      List
  </mat-button-toggle>
</mat-button-toggle-group>
<span>Current Value: {{toggle}}</span>
<div *ngIf="toggle">Grid</div>
<div *ngIf="!toggle">List</div>

TS：

import { Component} from '@angular/core';
import {MatButtonToggleChange} from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent{
  toggle: boolean = true;
  constructor(){
  }

  toggleView(change: MatButtonToggleChange){
    this.toggle = change.value;
  }
}

角度材质按钮切换可在布局/视图之间切换

1 个答案: