首页 文章

未捕获错误:模板解析错误:'app-message-menu'不是已知元素 . Angular 4

提问于
浏览
0

我有两个组件header-navbar.component.ts和message-menu.component.ts我想将消息菜单组件html包含到header-navbar组件中,即我想将其作为子组件 .

我在app.modules.ts,exports和imports的声明中添加了消息菜单组件 . Headers 导航栏组件中导入的消息菜单组件 . 但我仍然得到错误:

未捕获错误:模板解析错误:'app-message-menu'不是已知元素:1 . 如果'app-message-menu'是Angular组件,则验证它是否是此模块的一部分 . 2.如果'app-message-menu'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息

header-navbar.component.ts

import { Component, ViewChild, OnInit, Input, EventEmitter, ViewEncapsulation, OnDestroy, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

import { MessageMenuComponent } from '../message-menu/message-menu.component'
declare var jQuery: any;
import {
  OnboardingServiceV2
} from '../../../services/system/onboardingv2/onboarding.service.v2';
@Component({
  selector: 'header-navbar',
  templateUrl: './header-navbar.component.html',
  styleUrls: ['./header-navbar.component.css'],
  host: {'(document:click)': 'onClick($event)'},
  outputs:['onOpenSign'],
  // encapsulation: ViewEncapsulation.None,
  providers: [CollaborationProvider, MessageMenuComponent],
})
export class HeaderNavbarComponent implements OnInit, OnDestroy {

app.module.ts

import { MessageMenuComponent } from './widget-library/rich-elements/message-menu/message-menu.component';

@NgModule({
  declarations: [...
    MessageMenuComponent

 ],
 exports: [
  MessageMenuComponent
  ],

 bootstrap: [AppComponent]
})
export class myModule { }

header-navbar.component.html

<app-message-menu></app-message-menu>

message-menu.component.ts

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

@Component({
  selector: 'app-message-menu',
  templateUrl: './message-menu.component.html',
  styleUrls: ['./message-menu.component.css']
})
export class MessageMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

message-menu.component.html

<p>
  message-menu works!
</p>

我已经在stackoverflow上提到了几个问题,并按照所有步骤在另一个组件中使用一个组件,但它不起作用 .

我提到这个SO question寻求帮助 .

如果需要更多信息,请告诉我 .

1 回答

  • 0

    由于您没有使用共享模块,因此无需导出组件 . 还要在 app.module.ts 中的声明和提供程序下添加必要的提供程序和HeaderNavbarComponent

    @NgModule({
      declarations: [ 
        HeaderNavbarComponent 
        MessageMenuComponent
    
     ],
     exports: [  
      ],
    
     bootstrap: [AppComponent]
    })
    export class myModule { }
    

相关问题