使用 pug 将 angular 4 header 组件注入组件主组件

Question

我试图在主要组件中包含页眉，但没有显示。当我检查检查元素时。看起来像这样

inspect elements

它看起来像一个 iframe。这是我的 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!";
}

使用 pug 将 angular 4 header 组件注入组件主组件

Injecting angular 4 header component to a component main component with pug

angular-components

angular