Question

我尝试在主要组件中包含标题但未显示。当我检查检查元素。看起来像这样

它看起来像一个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文件的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!";
}

使用pug将角4头组件注入组件主组件

1 个答案: