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

即使使用NO_ERRORS_SCHEMA，也不是角度的已知元素

1 个答案: