首先场景是这样,首页我用了 ng2-bootstrap 的一个轮播图。
使用轮播图的步骤大致是这样:
首先在 app.module.ts 引入
/*ng2-bootstrap*/ import { CarouselModule } from 'ng2-bootstrap'; import { CarouselComponent } from '../carousel/carousel.component' @NgModule({ declarations: [ CarouselComponent... ], imports: [ CarouselModule.forRoot()... ] })
创建 carousel.component 的结构:carousel.component.ts 和 carousel.component.html
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-carousel', templateUrl: './carousel.component.html', styleUrls: ['./carousel.component.css'] }) export class CarouselComponent implements OnInit { constructor() { } ngOnInit() { } }
<carousel> <slide> <div class="easy-block-v1"> <img src="assets/img/mockup/img1.jpg" alt="First slide" class="img-responsive" > <div class="easy-block-v1-badge rgba-blue">保险销售</div> </div> </slide> <slide> <div class="easy-block-v1"> <img src="assets/img/mockup/img2.jpg" alt="Second slide" class="img-responsive" > <div class="easy-block-v1-badge rgba-blue">计算机技术</div> </div> </slide> <slide> <div class="easy-block-v1"> <img class="img-responsive" src="assets/img/mockup/img4.jpg" alt=""> <div class="easy-block-v1-badge rgba-blue">最好的程序员</div> </div> </slide> </carousel>
使用标签。
前面两个步骤完成之后,能够在 footer.component.html 和 header.component.html 中使用标签,也能正常的在 header 和 footer 组件中显示;
但是,假设轮播图这个组件我还需要在芦苇号、广场中也用,我的步骤是:
- 在 luwayh.module.ts 引入 import { CarouselComponent } from '../carousel/carousel.component'
- 再在 luwayh.component.html 中 使用标签。
但是这样是报错的:
ERROR Error: Uncaught (in promise): Error: Type FooterComponent is part of the declarations of 2 modules: AppModule and LuwayhModule! Please consider moving FooterComponent to a higher module that imports AppModule and LuwayhModule. You can also create a new NgModule that exports and includes FooterComponent then import that NgModule in AppModule and LuwayhModule. <!--请考虑将CarouselComponent移动到更高模块再导入AppModule和LuwayhModule。 您还可以创建一个新的NgModule,导出并包含CarouselComponent, 然后在AppModule和LuwayhModule中导入NgModule-->
我觉得这个场景还是比较常见的,一个组件被多个地方引用。但是不知道怎么做了。。。。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于