pug로 구성 요소 주 부품에 각도 4 헤더 구성 요소 주입

Question

주 구성 요소에 헤더를 포함 시키려고했지만 표시하지 않았습니다. 내가 inspect 요소를 검사 할 때. 그것은 iframe이 모양이

inspect elements

것 같습니다.

다음

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() { } 
} 

가 어떻게이 올바르게 내 구성 요소를 포함하도록 변경할 수 있습니다 이 내 main.component.ts입니까?

Answer 1

Angular 구성 요소의 templateUrl은 .html 파일을 가리키는 String이어야합니다.

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!"; 
}