Question

我有一个包含3个组件的“共享”模块。我想在app.component.html中包含这些组件。我该怎么做。所以我在app.component.html：

<header></header>

<div class="main-wrapper">
  <div class="bg-trick"></div>

  <main-nav></main-nav>

  <div class="main-view widened">

    <h1>Here comes my <router-outlet> tag later!</h1>

  </div>

  <sidebar></sidebar>

</div>

所有这些标签 - 我已经在共享模块组件中声明为选择器。在shared.module.ts中，我在声明和导出中添加了这些组件。在app.module.ts中，我通过导入添加了共享模块文件，并将其添加到导入的SharedModule中。这是我的文件：

shared.module.ts：

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { MainNavComponent } from './main-nav/main-nav.component';
import { SidebarComponent } from './sidebar/sidebar.component';


@NgModule({
  imports: [
   ],
  declarations: [
    HeaderComponent,
    MainNavComponent,
    SidebarComponent
  ],
  exports: [
    HeaderComponent,
    MainNavComponent,
    SidebarComponent
  ]
})
export class SharedModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的一个组件

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

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})

export class SidebarComponent {

}

所以我的应用程序不起作用，如果我从app.component.html删除组件选择器标签，它运行corectly。我究竟做错了什么。如何将antoher模块中的组件插入到app.model中并用作布局组件，它们会显示在每个页面上。

新手：在app.module和app.component.html中包含“共享”模块组件作为布局元素

0 个答案: