Question

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

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

工具栏：在以前的版本中，mat-toolbar的任何内容都没有包装在mat-toolbar-row中将在隐式创建的内部呈现垫工具栏行。从rc0开始，这个隐式行将不再存在创建。这意味着任何针对此的自定义应用程序CSS 隐式创建的mat-toolbar-row将不再适用。用户可以在自己的模板中重新添加mat-toolbar-row以匹配原始输出结构。这解决了长期存在的问题 display：flex样式很难在mat-toolbar上使用。

基本上，mat-toolbar中的任何内容都应该包含在mat-toolbar-row

中

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

1 个答案: