mat-toolbar 不是已知元素

Question

我有一個奇怪的問題，我想在一個組件中使用mat-toolbar （我已經在另一個組件中使用 mat-toolbar 所以 angular 和材料的版本是兼容的）但是編譯器有一個錯誤“mat -toolbar 不是已知元素”。

這是一個關於 mat-toolbar 沒有任何錯誤的組件：

<mat-toolbar class="app-toolbar py-2" color="primary">
    <div class="flex items-center">
        <img class="w-8 sm:mx-8 mx-3" src="assets/images/logo/L-logo-angle-brut.png">
        <span>{{'Home.HomePage.header_who_are_us' | transloco}}</span>
    </div>
    <a class="button-toolbar sm:mr-4 mr-0" mat-flat-button (click)="redirection()">
        <span>{{'Home.HomePage.header_beta' | transloco}}</span>
        <mat-icon class="ml-2 icon-size-5" [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
    </a>
</mat-toolbar>

和他的模塊：

import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { SharedModule } from 'app/shared/shared.module';
import { LandingHomeComponent } from 'app/modules/landing/home/home.component';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseCardModule } from '@fuse/components/card';
import { MatCardModule } from "@angular/material/card";
import { landingHomeRoutes } from './home.routing';
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatGridListModule } from '@angular/material/grid-list';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations: [
        LandingHomeComponent
    ],
    imports: [
        RouterModule.forChild(landingHomeRoutes),
        MatButtonModule,
        MatIconModule,
        SharedModule,
        MatButtonToggleModule,
        MatCheckboxModule,
        MatDividerModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatMenuModule,
        MatProgressBarModule,
        MatTooltipModule,
        FuseCardModule,
        SharedModule,
        MatCardModule,
        MatToolbarModule,
        MatGridListModule,
        TranslateModule
    ]
})
export class LandingHomeModule
{
}

以及觸發錯誤的人：

<div class="container">
    <mat-toolbar color="primary" class="main-toolbar">
        <span>Audio Player</span>
    </mat-toolbar>
</div>

和模塊：

import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { AudioPlayerComponent } from './audio-player.component';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseCardModule } from '@fuse/components/card';
import { SharedModule } from 'app/shared/shared.module';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CommonModule } from '@angular/common';
import {MatListModule} from '@angular/material/list';
import {MatSliderModule} from '@angular/material/slider';

const audioPlayerRoutes: Route[] = [
    {
        path     : '',
        component: AudioPlayerComponent
    }
];

@NgModule({
    declarations: [
        AudioPlayerComponent,
    ],
    imports: [
        RouterModule.forChild(audioPlayerRoutes),
        MatButtonModule,
        MatButtonToggleModule,
        MatCheckboxModule,
        MatDividerModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatMenuModule,
        MatProgressBarModule,
        MatListModule,
        MatTooltipModule,
        FuseCardModule,
        MatSliderModule,
        SharedModule,
        MatCardModule,
        FlexLayoutModule,
        MatToolbarModule,
        CommonModule,
    ],
    exports: [
        AudioPlayerComponent
    ]
})
export class AudioPlayerModule
{
}

MatSliderModule 和 MatListModule 有同樣的問題，但我沒有通過代碼，我想這是同樣的問題。 我真的被困住了，任何幫助將不勝感激......

Answer 1

消除

exports: [
        AudioPlayerComponent
    ]

還要檢查您是否已經在SharedModule中包含了與工具提示相關的模塊。 如果是，則從那里刪除。