1

您好我正在尝试使用 Angular 11 在 Ionic.io 上创建一个全局组件

我做了一个基本的应用程序并生成了一个组件命名标题在标题组件中我将选择器更改为

现在，当我尝试在任何模块中调用组件时，它会引发错误

core.js:14841 NG0304: 'dynamic-header' is not a known element:
1. If 'dynamic-header' is an Angular component, then verify that it is part of this module.
2. If 'dynamic-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

在控制台上是 header.component.ts

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

@Component({
  selector: 'dynamic-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

这是 app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [AppComponent,HeaderComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

我也尝试导入架构但没有工作这是另一个模块contact.module.ts

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

import { IonicModule } from '@ionic/angular';

import { ContactPageRoutingModule } from './contact-routing.module';

import { ContactPage } from './contact.page';
import { HeaderComponent } from '../header/header.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HeaderComponent,
    ContactPageRoutingModule
  ],
  declarations: [ContactPage]
})
export class ContactPageModule {}

这是html代码

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>
<dynamic-header></dynamic-header>
<ion-content>
  <ion-grid class="ion-padding">
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle class="ion-padding">Feel free to write to us</ion-card-subtitle>
      <ion-card-title class="ion-padding">Contact Us</ion-card-title>
    </ion-card-header>
    <ion-card-content> 
      echo background using --background
    </ion-card-content>
  </ion-card>
  <ion-row>
  <ion-col class="ion-align-self-center">
    <h3 class="ion-padding">Meet us at our Location</h3>
    <ul>
      <li><strong>Address:</strong> Jalpaiguri, West Bengal</li>
      <li><strong >Email:</strong><ion-button class="mail" href="mailto:khabarjalpaiguri@gmail.com" size="small" slot="end" color="light" fill="trasparent">khabarjalpaiguri@gmail.com</ion-button></li>
    </ul>
    </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
    <ion-item>
      <ion-label position="floating"> Your Name</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Email</ion-label>
      <ion-input type="mail"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Subject</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Message</ion-label>
      <ion-textarea></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-button type="submit" color="primary" class="ion-text-center" >Submit Query</ion-button>
    </ion-item>
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>
4

0 回答 0