angular - 即使使用 NO_ERRORS_SCHEMA 也不是已知的 Angular 元素

Question

我有 Angular Popup Component 使用如下(Online Example):

<popup>
  <anchor>
    Menu        
  </anchor>
  <window>
    <ul>
      <li>Item 1</li>           
      <li>Item 2</li>
    </ul>
  </window>
</popup>

组件模板是:

<a class="anchor" (click)="toggle()">
  <ng-content select="anchor"></ng-content>
</a>
<div class="window" [hidden]="!active">
  <ng-content select="window"></ng-content>
</div>

我收到以下错误:

Template parse errors: 'anchor' is not a known element:    
1. If 'anchor' is an Angular component, then verify that it is part of this module.    
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

弹出模块已经有 NO_ERRORS_SCHEMA:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { PopupComponent} from './popup.component';

@NgModule({  
  declarations: [PopupComponent],      
  imports: [CommonModule],  
  exports: [PopupComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

export class PopupModule {}

PopupComponent 是:

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

@Component({
  selector: 'popup',
  templateUrl: './popup.component.html'
})

export class PopupComponent {
  @Input() active: boolean = false;
  toggle() {
    this.active = !this.active;
  }
}

我错过了什么？

Answer 1

您将 anchor 元素放置在 AppComponent 模板中。 AppComponent 在 AppModule 中定义。

因此将 NO_ERRORS_SCHEMA 添加到该模块:

@NgModule({  
  ...
  schemas: [ NO_ERRORS_SCHEMA ]
})

export class AppModule {}

Forked Stackblitz