我有两个组件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 回答
由于您没有使用共享模块,因此无需导出组件 . 还要在 app.module.ts 中的声明和提供程序下添加必要的提供程序和HeaderNavbarComponent