Question

我有使用ngx-bootstrap构建的模式组件和我自己的A组件。我创建了一个<app-button>文件来向应用程序声明所有模式组件。 modal.module.ts在我的ButtonComponent文件中声明可以在任何地方使用。

modal.module.ts：

app.module.ts

app.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsModalService } from 'ngx-bootstrap';

import { KeyboardComponent } from '../keyboard/keyboard.component';
import { AlertModalComponent } from './alert-modal/alert-modal.component';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
import { LanguageModalComponent } from './language-modal/language-modal.component';
import { KeyboardModalComponent } from './keyboard-modal/keyboard-modal.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  entryComponents: [
    AlertModalComponent,
    ConfirmModalComponent,
    LanguageModalComponent,
    KeyboardModalComponent
  ],
  declarations: [
    KeyboardComponent,
    AlertModalComponent,
    ConfirmModalComponent,
    LanguageModalComponent,
    KeyboardModalComponent
  ]
})
export class ModalModule {

  constructor(
    private modalService: BsModalService
  ) {
    modalService.config.backdrop = false;
    modalService.config.ignoreBackdropClick = true;
  }

}

button.component.ts：

import { ModalModule } from './components/modal/modal.module';

...

import { AppComponent } from './app.component';
import { ButtonComponent } from './components/button/button.component';

@NgModule({
  declarations: [
    AppComponent,
    ButtonComponent,
    ...
  ],
  imports: [
    ...
    ModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

alert-modal.component.html：

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

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

  @Input() icon: string;
  @Input() color: string;
  @Input() label: string;

}

但是，我在运行时出错：

<div class="modal-body">
    <p [innerHTML]="message"></p>
</div>
<div class="modal-footer">
    <app-button [icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"></app-button>
</div>

compiler.js:2175 Uncaught Error: Template parse errors: Can't bind to 'icon' since it isn't a known property of 'app-button'. 1. If 'app-button' is an Angular component and it has 'icon' input, then verify that it is part of this module. 2. If 'app-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div> <div class="modal-footer"> <app-button [ERROR ->][icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"></app-button> </div> "): ng:///ModalModule/AlertModalComponent.html@4:18属性被很好地定义为icon的属性，因此我认为此错误不是合法错误。

Answer 1

该错误提到了string city ="'Berlin','London','Madrid','Bern','Graz'" var query = from c in Customers where c.City ==?? select c;，但我看不到在任何地方声明了它。看来您可能在标记中声明了vesta-button而不是vesta-button，在这种情况下，您需要更新标记以改为说app-button。

编辑

在这种情况下，您似乎正在尝试在app-button中使用app-button（ButtonComponent）。但是，这是行不通的，因为ModalModule无法导入ModalModule。相反，您需要创建一个包含AppModule的{{1}}，然后将其导入SharedModule：

shared.module.ts

ButtonComponent

然后将ModalModule移到@NgModule({ declarations: [ButtonComponent], exports: [ButtonComponent] }) export class SharedModule { }模块文件夹中。

modal.module.ts

ButtonComponent

您还可以在Shared中导入@NgModule({ imports: [ CommonModule, SharedModule ], ... }) export class ModalModule { ... }，因此也可以在那里使用按钮。

Answer 2

If 'app-button' is an Angular component

此消息表示Angular编译器无法将XML名称app-button识别为组件的选择器。

正在编译ModalModule时会产生错误，因为该模块没有 import 另一个导出该组件的模块，或者它没有直接声明该组件本身。

看看您的代码，ButtonComponent在AppModule中声明，但是该模块导入ModalModule。

您需要将ButtonComponent移至另一个模块（可能命名为ButtonModule）并确保已导出，然后可以导入该模块放入ModalModule。

通常，将组件添加到AppModule中是一种不好的做法。您应该创建包含组件的 sharable 模块，以避免此类问题。

无法绑定到“图标”，因为它不是“应用程序按钮”的已知属性

2 个答案: