我正在尝试在注册页面中实现新的“通知”组件，并且目前在检查控制台中出现错误，指出：
“未捕获的错误：模板解析错误： “ app-notification”不是已知元素：“
我尝试将“ app-notification ... / app-notification”放置在多个位置，但遇到相同的错误。目前，它在我的register.component.html页面中，如下所示：
f1(df, n = 10, mv = 3) %>%
head
# position name
#1 Melon Melon
#2 1,2,3,4,5,6,7,8,9,10 RSNSNASSAV
#3 4,5,6,7,8,9,10,11,12,13 SNASSAVSTS
#4 7,8,9,10,11,12,13,14,15,16 SSAVSTSCVS
#5 10,11,12,13,14,15,16,17,18,19 VSTSCVSNRA
#6 13,14,15,16,17,18,19,20,21,22 SCVSNRAMKG
观看视频后，开发人员似乎将代码放在他的“ app.component.html”中，但是在我正在使用的“ Pages Revox模板”中，除了h1之外，app.component.html中没有任何内容。
我应该在哪里放置这个新的应用程序通知组件，以便它可以工作？我知道我没有提供太多信息，但是如果需要的话，一定会提供更多信息。
这是我的app.module.ts：
f1(df, n = 10, mv = 4) %>%
head
# position name
#1 Melon Melon
#2 1,2,3,4,5,6,7,8,9,10 RSNSNASSAV
#3 5,6,7,8,9,10,11,12,13,14 NASSAVSTSC
#4 9,10,11,12,13,14,15,16,17,18 AVSTSCVSNR
#5 13,14,15,16,17,18,19,20,21,22 SCVSNRAMKG
#6 17,18,19,20,21,22,23,24,25,26 NRAMKGTTHY
这是notification.component.html：
<div class="content {{_contentClass}}">
<app-notification></app-notification>
<router-outlet></router-outlet>
</div>
这是notification.component.spec.ts：
//Angular Core
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { RouteGuard } from "./session/route.guard";
import { NotificationComponent } from './notification/notification.component';
//Routing
import { AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
//Layouts
import { CondensedComponent, BlankComponent, RootLayout,CorporateLayout,SimplyWhiteLayout,ExecutiveLayout, CasualLayout } from './@pages/layouts';
//Layout Service - Required
import { pagesToggleService } from './@pages/services/toggler.service';
//Shared Layout Components
import { SidebarComponent } from './@pages/components/sidebar/sidebar.component';
import { QuickviewComponent } from './@pages/components/quickview/quickview.component';
import { QuickviewService } from './@pages/components/quickview/quickview.service';
import { SearchOverlayComponent } from './@pages/components/search-overlay/search-overlay.component';
import { HeaderComponent } from './@pages/components/header/header.component';
import { HorizontalMenuComponent } from './@pages/components/horizontal-menu/horizontal-menu.component';
import { SharedModule } from './@pages/components/shared.module';
import { pgListViewModule} from './@pages/components/list-view/list-view.module';
import { pgCardModule} from './@pages/components/card/card.module';
import { pgCardSocialModule} from './@pages/components/card-social/card-social.module';
//Basic Bootstrap Modules
import {BsDropdownModule,
AccordionModule,
AlertModule,
ButtonsModule,
CollapseModule,
ModalModule,
ProgressbarModule,
TabsModule,
TooltipModule,
TypeaheadModule,
} from 'ngx-bootstrap';
//Pages Globaly required Components - Optional
import { pgTabsModule } from './@pages/components/tabs/tabs.module';
import { pgSwitchModule } from './@pages/components/switch/switch.module';
import { ProgressModule } from './@pages/components/progress/progress.module';
//Thirdparty Components / Plugins - Optional
import { NvD3Module } from 'ngx-nvd3';
import { NgxEchartsModule } from 'ngx-echarts';
import { IsotopeModule } from 'ngx-isotope';
import { StepsformDirective } from './social/stepsform.directive';
import { NgxDnDModule} from '@swimlane/ngx-dnd';
import { QuillModule } from 'ngx-quill';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
//Service - Demo content - Optional
import { ChartService } from './charts/charts.service';
import { SocialService } from './social/social.service';
//Social Page - Optional
import { SocialComponent } from './social/social.component';
import { CoverpageDirective } from './social/coverpage.directive';
//Demo Pages - Optional
import { FormWizardComponent } from './forms/form-wizard/form-wizard.component';
import { CardsComponentPage } from './cards/cards.component';
import { ViewsPageComponent } from './views/views.component';
import { ChartsComponent } from './charts/charts.component';
//Dashboard Widgets - Optional
import { DashboardModule } from './dashboard/dashboard.module';
//Dashboards - Optional
import { CondensedDashboardComponent } from './dashboard/condensed/dashboard.component';
import { SimplyWhiteDashboardComponent } from './dashboard/simplywhite/dashboard.component';
import { CasualDashboardComponent } from './dashboard/casual/dashboard.component';
import { CorporateDashboardComponent } from './dashboard/corporate/dashboard.component';
import { ExecutiveDashboardComponent } from './dashboard/executive/dashboard.component';
//Sample Blank Pages - Optional
import { BlankCorporateComponent } from './@pages/layouts/blank-corporate/blank-corporate.component';
import { BlankSimplywhiteComponent } from './@pages/layouts/blank-simplywhite/blank-simplywhite.component';
import { BlankCasualComponent } from './@pages/layouts/blank-casual/blank-casual.component';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
//Hammer Config Overide
//https://github.com/angular/angular/issues/10541
export class AppHammerConfig extends HammerGestureConfig {
overrides = <any>{
'pinch': { enable: false },
'rotate': { enable: false }
}
}
@NgModule({
declarations: [
AppComponent,
CondensedComponent,
CorporateLayout,
SimplyWhiteLayout,
ExecutiveLayout,
CasualLayout,
SidebarComponent, QuickviewComponent, SearchOverlayComponent, HeaderComponent,HorizontalMenuComponent,
BlankComponent,
RootLayout,
CardsComponentPage,
ViewsPageComponent,
ChartsComponent,
SocialComponent,
StepsformDirective,
CoverpageDirective,
CondensedDashboardComponent,
SimplyWhiteDashboardComponent,
CasualDashboardComponent,
CorporateDashboardComponent,
ExecutiveDashboardComponent,
BlankCorporateComponent,
BlankSimplywhiteComponent,
BlankCasualComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
HttpModule,
HttpClientModule,
SharedModule,
ProgressModule,
pgListViewModule,
pgCardModule,
pgCardSocialModule,
RouterModule.forRoot(AppRoutes),
BsDropdownModule.forRoot(),
AccordionModule.forRoot(),
AlertModule.forRoot(),
ButtonsModule.forRoot(),
CollapseModule.forRoot(),
ModalModule.forRoot(),
ProgressbarModule.forRoot(),
TabsModule.forRoot(),
TooltipModule.forRoot(),
TypeaheadModule.forRoot(),
NvD3Module,
pgTabsModule,
NgxEchartsModule,
IsotopeModule,
NgxDnDModule,
QuillModule,
PerfectScrollbarModule,
pgSwitchModule,
DashboardModule
],
providers: [QuickviewService,pagesToggleService,ChartService,SocialService,RouteGuard,{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},
{
provide: HAMMER_GESTURE_CONFIG,
useClass: AppHammerConfig
}],
bootstrap: [AppComponent],
})
export class AppModule { }
这是notification.component.ts：
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="alert">
This is a test
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我认为您只需将NotificationComponent和entryComponents添加到declarations。
// in addition to what you already have
@NgModule({
imports: [],
exports: [],
declarations: [NotificationComponent],
entryComponents: [NotificationComponent],
exports: [NotificationComponent],
providers: [],
})
export class NameModule {}