Angular 5 + Material - MatToolbar:尝试组合不同的工具栏模式

Question

将我的应用程序从角度 4 升级到角度 5，虽然我可以运行 ng serve --watch 没有错误。当我尝试加载项目的页面时，我收到此错误消息。

MatToolbar：尝试组合不同的工具栏模式。也 显式指定多个<mat-toolbar-row>元素或仅放置 单行<mat-toolbar>内的内容。

它指的是下面的代码段，我经常在不同的页面上在我的应用程序中这样做。

profile.component.html

<div id="profile" class="body-1">
    <mat-toolbar color="primary">
        <span>Profile</span>
        <span class="example-spacer"></span> 
        <div *ngIf="!isItMyProfile()">
            <button mat-icon-button (click)="message()" matTooltip="Message">
                <mat-icon>message</mat-icon>
        </button>
            <button mat-icon-button *ngIf="!isFollowing()" (click)="follow()" matTooltip="Follow">
                    <mat-icon>person_add</mat-icon>
            </button>
            <button mat-icon-button *ngIf="isFollowing()" (click)="unfollow()" matTooltip="Unfollow">
                    <mat-icon>remove</mat-icon>
            </button>
        </div>
        <button mat-icon-button matTooltip="Share" matTooltip="Share">
                <mat-icon>share</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Search" matTooltip="Search">
                <mat-icon>search</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Notifications">
                <mat-icon>notifications</mat-icon>
        </button>

        <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu" yPosition="below" xPosition="after">
            <button mat-menu-item routerLink="edit">
                    <mat-icon>mode_edit</mat-icon>
                    <span>Edit Profile</span>
                </button>
        </mat-menu>
        <mat-toolbar-row class="profile-header" fxLayout="row" fxLayoutAlign="space-between center">
            <section fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
                <div class="profile-picture">
                    <img src="http://via.placeholder.com/100x100" alt="" class="img-circle">
                </div>
                <div class="profile-user" fxLayout="column" fxLayoutAlign="center">
                    <span class="body-1">@{{user?.profile?.username}}</span>
                    <span class="body-1">{{user?.profile?.firstname}} {{ user?.profile?.lastname }}</span>
                </div>
            </section>

            <div class="profile-info" fxLayout="column" fxLayoutAlign="center start">
                <small class="profile-age">
                                <i class="fa fa-mars"></i>
                         [21]
                    </small>
                <small class="profile-location">
                        <mat-icon>location_on</mat-icon>
                        [Manchester, UK]
                    </small>
                <div fxLayout="row" fxLayoutAlign="center center">
                    <small *ngFor="let t of user?.profile?.languages.teach; let isLast=last">{{t.code}}{{isLast ? '' : ', '}} </small>
                    <mat-icon>keyboard_arrow_right</mat-icon>
                    <small *ngFor="let l of user?.profile?.languages.learn; let isLast=last">{{l.code}}{{isLast ? '' : ', '}} </small>
                </div>
            </div>
        </mat-toolbar-row>
        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between end">
            <div class="profile-meta" fxLayout="row" fxFlex="25" fxLayoutAlign="center" fxLayoutGap="20px">
                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>0</h4>
                    <small>level</small>
                </div>
                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>{{user?.followers.length}}</h4>
                    <small (click)="openFollowers()">Followers</small>
                </div>
                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>{{user?.following.length}}</h4>
                    <small (click)="openFollowing()">Following</small>
                </div>
            </div>
            <nav mat-tab-nav-bar class="profile-navbar" backgroundColor="primary">
                <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
                    <mat-icon>{{link.icon}}</mat-icon>{{link.label}}
                </a>
            </nav>
        </mat-toolbar-row>
    </mat-toolbar>

    <div class="profile-content">
        <router-outlet></router-outlet>
    </div>
</div>

我实际上不知道问题是什么，因为我只是扩展了材料文档中给出的示例。 https://material.angular.io/components/toolbar/examples

"@angular/material": "^5.0.0-rc0",

Answer 1

这是最新更新中的重大更改。

https://github.com/angular/material2/blob/master/CHANGELOG.md#breaking-changes

工具栏

：在以前的版本中，垫工具栏的任何内容都未换行 在垫工具栏行中将呈现在隐式创建的 垫工具栏行。从 rc0 开始，此隐式行将不再是 创建。这意味着任何针对此的自定义应用程序 CSS 隐式创建的垫子工具栏行将不再适用。用户可以 在他们自己的模板中重新添加垫工具栏行以匹配 原始输出结构。这解决了一个长期存在的问题，其中 显示：弹性样式很难在垫子工具栏上使用。

基本上，垫子工具栏

中的任何内容都应该包装在垫子工具栏行内