时间戳

首页 > 解决方案 > 错误未捕获的错误：在应用程序模块中声明时模板解析错误

angular - 错误未捕获的错误：在应用程序模块中声明时模板解析错误

问题描述

不知道发生了什么以及为什么当我更改上传位置时会弹出此错误。本质上，我正在将一个组件从只能在一个组件中访问到整个应用程序，现在我得到了那个错误。

app.module.ts

import { DefaultProfilePictureComponent } from '../sharedModules/components/default-profile-picture/default-profile-picture.component'

@NgModule({
  declarations: [
    ...
    DefaultProfilePictureComponent,
    ...
  ],
  ...
})

默认配置文件图片.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 class="profile-container" *ngIf="big">
  <div class="profileImageBig">{{ char1 }} {{ char2 || '' }}</div>
</div>

主页.html

<app-default-profile-picture
  *ngIf="!person.profilePicture"
  lastNames="person.lastNames"
  contactBox="true"
></app-default-profile-picture>

在我尝试使用该组件的任何地方，我都会收到错误消息

app-default-profile-picture' 不是已知元素：

但是如果我将它包含在中，home.page.module.ts那么我会收到错误消息，指出它是在两个模块中声明的。是什么赋予了？谢谢！

标签： angular

解决方案

问题是您使用错误。组件只能在您导入它的模块中使用。在您的情况下，问题是您无法加载由另一个模块中的模块导入的组件以允许它use.export 来自 home.page.module.ts 的组件

@NgModule({
  declarations: [
    ...
    DefaultProfilePictureComponent,
    ...
  ],
exports:[ DefaultProfilePictureComponent]
  ...
})

并将其导入您想要的其他模块中，例如 app.modules.ts

app.module.ts

@NgModule({
imports:[
BrwsrModule,
...,
HomePageModule
],


  ...
})

推荐阅读