时间戳

首页 > 解决方案 > 使用共享模块的未知角度元素错误

angular - 使用共享模块的未知角度元素错误

问题描述

以前在堆栈溢出 时，我同意答案海报，即处理此问题的最佳方法是创建一个共享模块。我已经开始这样做了，但是最初的问题仍然是一个组件在角度上未知

shared.module.ts

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 时，出现错误：

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
  ],
})

主页.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 {}

主页.html

<app-default-profile-picture [lastNames]="userInfo.lastNames" [big]="true"></app-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();
    }
  }
}

默认配置文件图片.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>

有人知道这个问题吗？感谢您的任何帮助！

标签： angular

解决方案

我只需要停止应用程序运行并再次加载它。这是漫长的一天。对不起

推荐阅读