Angular 6 组件根据路线变化，错误：选择器“app-navbar”不匹配任何元素

Posted 2023-02-23

【中文标题】Angular 6 组件根据路线变化，错误：选择器“app-navbar”不匹配任何元素

【英文标题】：Angular 6 component change depending on the route, Error: The selector "app-navbar" did not match any elements

【发布时间】：2019-03-08 10:36:42

【问题描述】：

我有一个包含两部分的 Angular 应用程序：

一个适用于所有用户，当前视图 一个带有管理仪表板的管理员

我想要在我的 app.component.html 中管理两个不同的视图

app.component.html

<div *ngIf="!isAdmin()">
    <app-navbar></app-navbar>
</div>

<router-outlet></router-outlet>

<app-footer></app-footer>

app.component.ts

import  Component  from '@angular/core';
import  ActivatedRoute  from '@angular/router';
import  Location  from '@angular/common';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent 

  constructor(
    private route: ActivatedRoute,
    private location: Location,
  )  

  public getPath() 
    return this.location.path();  
  

  public isAdmin() 
    return this.location.path().includes("/admin");
  

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  HttpClientModule from '@angular/common/http';
import  NguCarouselModule  from '@ngu/carousel';
import  AgmCoreModule, GoogleMapsAPIWrapper  from '@agm/core';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  NgbModule  from '@ng-bootstrap/ng-bootstrap';

import  AppComponent  from '@app/app.component';
import  SharedModule  from '@app/shared/shared.module';
import  RouterModule  from '@angular/router';
import  AppRoutingModule  from '@app/app-routing.module';
import  NavbarComponent  from '@app/components/navbar/navbar.component';
import  FooterComponent  from './components/footer/footer.component';
import  AdminComponent  from './admin/admin.component';

@NgModule(
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    AdminComponent,
  ],
  imports: [
    RouterModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule.forRoot()
  ],
  bootstrap: [AppComponent, NavbarComponent]
)

export class AppModule  

但在我的应用程序中出现此错误：

ERROR 错误：选择器“app-navbar”不匹配任何元素 在 DefaultDomRenderer2.push../node_modules/@angular/platform-b​​rowser/fesm5/platform-b​​rowser.js.DefaultDomRenderer2.selectRootElement (平台-browser.js:1079) 在 BaseAnimationRenderer.push../node_modules/@angular/platform-b​​rowser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement （动画.js:236） 在 DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:11456) 在 createElement (core.js:8136) 在 createViewNodes (core.js:10367) 在 createRootView (core.js:10320) 在 callWithDebugContext (core.js:11351) 在 Object.debugCreateRootView [as createRootView] (core.js:10838) 在 ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8666) 在 ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3315)

如何使用我的两个不同导航栏区分这两个视图？我想为每个视图创建导航栏的一个组件。

当我删除 *ngIf="!isAdmin()" 时它工作正常。

【问题讨论】：

请发布您的所有模块，可能您忘记将组件添加到其中一个

【参考方案1】：

检查在哪个模块中声明了<app-navbar>（哪个模块确实包含AppNavbarComponent？） 检查AppNavbarComponent是否在其模块中导出 检查上述模块是否在app.module.ts中导入

如果没有模块声明AppNavbarComponent，则将其添加到app.module.ts的declarations中

【讨论】：

是的，它已被声明。当我删除 *ngIf="!isAdmin()" 它工作正常...

我发现了问题，我在引导程序中的 app.module.ts 中导入了 NavbarComponent：[AppComponent, NavbarComponent]，我将其从引导程序中删除。