使用共享模块的未知角度元素发生错误 [英] Error with unknown angular element using a shared module

问题描述

以前在

Previously on stack overflow I agree with the answer poster that the best way to handle this is to create a shared module. Which I have started to do, however the initial issue continues with a component not being known in angular

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DefaultProfilePictureComponent } from './components/default-profile-picture/default-profile-picture.component';
@NgModule({
  imports: [CommonModule, ReactiveFormsModule],
  declarations: [DefaultProfilePictureComponent],
  exports: [CommonModule, FormsModule, DefaultProfilePictureComponent, ReactiveFormsModule],
})
export class SharedModule {}

但是当尝试在home.page.ts中使用DefaultProfilePicture时，出现错误:

however when trying to use the DefaultProfilePicture within the home.page.ts I get the error:

Uncaught Error: Template parse errors:
Can't bind to 'lastNames' since it isn't a known property of 'app-default-profile-picture'.
1. If 'app-default-profile-picture' is an Angular component and it has 'lastNames' input, then verify that it is part of this module.
2. If 'app-default-profile-picture' 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. ("
            <ion-col size="6" *ngIf="!userInfo.profilePicture">
              <app-default-profile-picture [ERROR ->][lastNames]="userInfo.lastNames" [big]="true"></app-default-profile-picture>

app.module.ts

import { SharedModule } from '../sharedModules/shared.module';

@NgModule({
  imports: [
    SharedModule
  ],
  exports: [
    SharedModule
  ],
})

home.page.ts

import { SharedModule } from '../../sharedModules/shared.module';
@NgModule({
  imports: [
    SharedModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage,
      },
    ]),
  ],
  entryComponents: [NotificationComponent, ProfileComponent],
  declarations: [HomePage, ProfileComponent, NotificationComponent],
})
export class HomePageModule {}

home.page.html

<app-default-profile-picture [lastNames]="userInfo.lastNames" [big]="true"></app-default-profile-picture>

default-profile-picture.component.ts

@Component({
  selector: 'app-default-profile-picture',
  templateUrl: './default-profile-picture.component.html',
  styleUrls: ['./default-profile-picture.component.scss'],
})
export class DefaultProfilePictureComponent implements OnInit {
  @Input() private lastNames: string;
  @Input() private big: boolean;
  @Input() private contactBox: boolean;

  private char1: string;
  private char2?: string;

  public constructor() {}

  public ngOnInit(): void {
    console.log(this.lastNames.split(' ').length);
    if (this.lastNames.split('').length > 1) {
      this.char1 = this.lastNames.split(' ')[0][0].toUpperCase();
      this.char2 = this.lastNames.split(' ')[1][0].toUpperCase();
    } else {
      this.char1 = this.lastNames.split(' ')[0][0].toUpperCase();
    }
  }
}

default-profile-picture.component.html

<div *ngIf="!big && !contactBox">
  <div class="profileImage">{{ char1 }} {{ char2 }}</div>
</div>

<div class="profile-container" *ngIf="big">
  <div class="profileImageBig">{{ char1 }} {{ char2 || '' }}</div>
</div>

<div *ngIf="contactBox">
  <div class="contact-box ion-text-center">{{ char1 }} {{ char2 || '' }}</div>
</div>

有人知道这个问题吗?感谢您提供的所有帮助！

anyone know the problem with this? Thanks for any and all help!

推荐答案

我只需要停止运行该应用程序并再次加载它.这是漫长的一天.抱歉

I just needed to stop the application from running and load it again. It's been a long day. Sorry

这篇关于使用共享模块的未知角度元素发生错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！