Angular 5中Angular Material的mat-toolbar-row组件无法使用求助

Hey there, let's get this sorted out—this error usually boils down to a missing module import or a small template mistake. Here's what you need to check:

1. Make Sure MatToolbarModule is Imported in the Right Module #

The mat-toolbar-row component is part of the MatToolbarModule, so you need to import this module in every Angular module that uses either <mat-toolbar> or <mat-toolbar-row>.

If your page.component is declared directly in AppModule, update your app.module.ts like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatToolbarModule } from '@angular/material/toolbar'; // Import the toolbar module

import { AppComponent } from './app.component';
import { PageComponent } from './page/page.component'; // Your page component

@NgModule({
  declarations: [
    AppComponent,
    PageComponent
  ],
  imports: [
    BrowserModule,
    MatToolbarModule // Add this line to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If your PageComponent is in a separate feature module (like PageModule), you need to import MatToolbarModule there too—Angular modules don't automatically inherit imports from parent modules:

// page.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';

import { PageComponent } from './page.component';

@NgModule({
  declarations: [PageComponent],
  imports: [
    CommonModule,
    MatToolbarModule // Add this here
  ],
  exports: [PageComponent] // If you're using this component elsewhere
})
export class PageModule { }

2. Verify Your Template Syntax is Correct #

mat-toolbar-row can't be used on its own—it has to be a child of <mat-toolbar>. Double-check your page.component.html looks like this:

<!-- Correct usage -->
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Your Toolbar Content Here</span>
  </mat-toolbar-row>
</mat-toolbar>

If you're using <mat-toolbar-row> outside of a <mat-toolbar>, that'll cause issues too.

3. Confirm Angular Material Version Compatibility #

Since you're using Angular 5, you need to make sure your Angular Material and CDK versions are compatible (they should be 5.x.x). Check your package.json to verify:

{
  "dependencies": {
    "@angular/material": "^5.2.4",
    "@angular/cdk": "^5.2.4",
    // ... other dependencies
  }
}

If the versions don't match, install the compatible ones with:

npm install @angular/material@5.2.4 @angular/cdk@5.2.4 --save

After making these changes, restart your Angular dev server (ng serve) to ensure the module changes are picked up. That should resolve the template parse error!

内容的提问来源于stack exchange，提问作者nilsonjr