javascript - Angular 6“app-action-button”不是一个已知元素

我试图添加模块之间共享的组件。我唯一得到的就是这个错误。

我一直在寻找类似问题的答案，但没有帮助，而且我一直在收到此错误。

也尝试在app.module中声明它，但结果相同。

码：

零件

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'app-action-button',
    templateUrl: './action-button.component.html',
    styleUrls: ['./action-button.component.scss'],
})

export class ActionButtonComponent {

    private _className = '';
    private _buttonText = '';

    @Input()
    set className(className: string) {
        this._className = (className && className.trim() || 'default');
    }
    get className(): string { return this._className; }

    @Input()
    set buttonText(buttonText: string) {
        this._buttonText = (buttonText && buttonText.trim() || 'n/n');
    }
    get buttonText(): string { return this._buttonText; }

    @Output() buttonActionEvent = new EventEmitter();


    constructor() { }

    buttonAction() {
        this.buttonActionEvent.emit(true);
    }
}

我在其中声明此组件的模块

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material.module';
import { ActionButtonComponent } from '../../shared/action-button/action-button.component';
import { ActionButtonModule } from '../../shared/action-button/action-button.module';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, ActionButtonModule],
    declarations: [LoginComponent],
    entryComponents: [ActionButtonComponent],
    providers: [LoginService]
})

export class LoginModule {}

html模板

    <div class="login-wrapper">
    <ng-container *ngIf="isLoading">
        <mat-spinner class="loading" diameter="32"></mat-spinner>
    </ng-container>
    <ng-container *ngIf="!isLoading">
        <h2>Zaloguj się za pomocą czytnika</h2>
        <form [formGroup]="operator">
            <mat-form-field appearance="outline">
                <mat-label>ID Operatora *</mat-label>
                <input type="text" matInput placeholder="Zeskanuj kod kreskowy" formControlName="id">
            </mat-form-field>
            <mat-form-field appearance="outline">
                <mat-label>Wybór maszyny *</mat-label>
                <mat-select formControlName="machine">
                    <mat-option *ngFor="let machine of machinesList" [value]="machine.externalId">
                        {{ machine.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </form>
        <!-- <div class="buttons-wrapper">
            <button (click)="getUrl()" mat-raised-button>maszyna Bullmer</button>
            <button mat-raised-button color="primary">maszyna nieBullmer</button>
        </div> -->
        <app-action-button [className]="logout-button" (buttonActionEvent)="test()"></app-action-button>
        <button [disabled]="!operator.valid" (click)="loginAndSetMachine()" mat-raised-button>
            <mat-icon color="primary" fontSet="fas" fontIcon="fa-check" class="material-icons"></mat-icon>
        </button>
    </ng-container>
</div>

@编辑
我制作了ActionButton模块并将其导入LoginModule中。仍然出现相同的错误。

ActionButton模块

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material.module';

import { ActionButtonComponent } from './action-button.component';


@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [ActionButtonComponent],
    exports : [ActionButtonComponent],
    entryComponents: [],
    providers: []
})

export class ActionButtonModule {}

最佳答案

如果要在模块之间共享它，则必须将其添加到声明它的模块的导出中，然后将该模块导入到要使用ActionButtonComponent的模块中。

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [LoginComponent, ActionButtonComponent],
    entryComponents: [],
    providers: [LoginService],
    exports:[ActionButtonComponent]
})
export class LoginModule {}

您的其他模块：

@NgModule({
    imports: [...,LoginModule],
    declarations: [],
    exports:[]
})
export class OtherModule {}

现在，您可以在ActionButtonComponent中声明的任何组件中使用OtherModule