角度-在组件A内添加组件B

Question

I have the following structure in my project,

src
- component-a
-- component-a.component.ts
-- component-a.html
-- component-a.scss
-- component-a.component.spec.ts

- component-b
-- component-b.component.ts
-- component-b.html
-- component-b.scss
-- component-b.component.spec.ts

- app.component.ts
- app.module.ts
- app.html

I'm using component-a inside my app.component.ts, so I have included it in declarations in the app.module.ts.

declarations: [
        App, ComponentA,
    ],

And in the app.html: <component-a></component-a>

Now I want to add component-b inside my component-a . So whatever I tried, when I use <component-b></component-b> inside component-a.html I get this error:

Unhandled Promise rejection: Template parse errors:
'component-b' is not a known element:
1. If 'component-b' is an Angular component, then verify that it is part of this module.
2. If 'component-b' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<component-b></component-b>
"): ng:///AppModule/ComponentA.html@7:6 ; Zone: <root> ; Task: Promise.then ; Value: 

How do use component-b in component-a.html?

• I tried importing component-b in component-a.component.ts
• I tried importing and adding component-b in the app.module.ts declarations.

Answer 1

As we've discussed in the comment section. You can provide ComponentB inside your app.module to import it throughout your app.

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

@NgModule({
  ...
  declarations: [
    AComponent, BComponent
  ]
})    
export class AppModule {}

http://plnkr.co/edit/H929znCRMcqlwuI4ySvp?p=preview

Answer 2

1. Create a module for both components.
2. Import component B into component A 's module imports .
3. Done.

Example (A Module)

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

import {BModule} from '@components/b/b.module';

@NgModule({
  imports: [
    BModule
  ],
  exports: [
    AComponent
  ],
  declarations: [
    AComponent
  ]
})

export class AModule {}

Example (B Module):

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

@NgModule({
  exports: [
    BComponent
  ],
  declarations: [
    BComponent
  ]
})

export class BModule {}