pugを使用して角4のヘッダーコンポーネントをコンポーネントメインコンポーネントに注入

Question

ヘッダーをメインコンポーネントに含めるようにしましたが、表示されませんでした。私がinspect要素をチェックするとき。それはそれは、iframeのように見えるこの

inspect elements

のように見えます。 これは私のmain.component.tsである：ここでは

import { HeaderComponent } from "../../components"; 

@Component({ 
    selector: 'app-main', 
    template: '<app-header></app-header>', 
    styles: [require('./main.component.scss')] 
}) 
export class MainComponent implements OnInit { 
    constructor() {} 
    ngOnInit() { } 
} 

は私のheader.component.tsファイルです：

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

@Component({ 
    selector: 'app-header', 
    templateUrl: require('./header.component.pug'), 
    styles: [require('./header.component.scss')] 
}) 
export class HeaderComponent { 
    constructor() { } 
} 

は、どのように私は正しく私のコンポーネントが含まれるように、これを変更することができますか？

Answer 1

AngularコンポーネントのtemplateUrlは、.htmlファイルを指す文字列である必要があります。

header.component.html

<div>{{title}}</div> 

header.component.ts：

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

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html' // <-- Like this 
}) 
export class HeaderComponent { 
    title = "Header works!"; 
}