javascript - Include htm template into another one on Angular 6 - Stack Overflow

admin管理员组

文章数量:1345179

Actually, i have one HTML file which contains all the code. I want to split this one on multiple files and to include them.

How can i do this?

Thanks a lot.

Actually, i have one HTML file which contains all the code. I want to split this one on multiple files and to include them.

How can i do this?

Thanks a lot.

• javascript
• html
• angular
• typescript
• include

Share Improve this question Follow asked Nov 6, 2018 at 8:34 ims16ims16 12111 silver badge99 bronze badges 1

• I would suggest you to read about ponents: angular.io/guide/architecture-ponents – JeroenE Commented Nov 6, 2018 at 8:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Let's say you have this html:

<div class="ponentA">ComponentA</div>
<div class="ponentB">ComponentB</div>

and this code is into the `AppComponent. You can split this two div into two ponent:

ComponentA.ts

@Component({
  selector: 'ponentA',
  templateUrl: 'ponentA.ponent.html',
  styleUrls: ['ponentA.ponent.scss'],

)}
export class ComponentA {

}

ComponentA.html

<div class="ponentA">ComponentA</div>

ComponentB.ts

@Component({
  selector: 'ponentB',
  templateUrl: 'ponentB.ponent.html',
  styleUrls: ['ponentB.ponent.scss'],

)}
export class ComponentB {

}

ComponentB.html

<div class="ponentB">ComponentB</div>

then into your AppComponent.html :

<ponentA></ponentA>
<ponentB></ponentB>

• You need to write the second Component - Angular Components
• Add this ponent to your App.module.ts - Angular Modules
• If you have business logic you can also provide this by Services - Angular Services

In addition to answers above, don't forget to include

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

in your both ponents ts file.

本文标签： javascriptInclude htm template into another one on Angular 6Stack Overflow