如何在angular8中创建新的html文件

我在

src/app/app.component.html

中创建了一个新文件。当我运行

ng serve-o

我在

app.componet.html

模板中看不到内容，但在Chrome中看到字符串“/app.component.html”。以下是我的组件本身的内容：

@Component({
  selector: 'app-root',
  template: `./app.component.html`,
  styles: [
    '.isActive { text-decoration: underline; }',
    '.oddCategory { color: green }'
  ]
})

---

知道我这里缺少什么吗？

模板：'./app.component.html'，

---

替换“to”

我有一个新问题。我想使用“ability.component.html”文件中另一个组件的对象。它看起来像： app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: `./app.component.html`,
  styles: []
})
export class AppComponent {

  constructor(){
  }

}

import { Component, OnInit } from '@angular/core';
import { Human, PozycjaNaBoisku } from '../model'

@Component({
  selector: 'app-baza',
  templateUrl: './baza.component.html',
  styleUrls: ['./baza.component.css']
})
export class BazaComponent implements OnInit {
  humans: Human[] = [
    {
    name: "Jordan",
    wzrost: 199,
    age: 23,
    pozycja: PozycjaNaBoisku.skrzydlowy,
    },
    {
      name: "Shaq",
      wzrost: 218,
      age: 34,
      pozycja: PozycjaNaBoisku.center,
    },
  ]

  human: Human = this.humans[0];

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit, Input } from '@angular/core';
import { Human, PozycjaNaBoisku } from '../model';

@Component({
  selector: 'app-ability',
  templateUrl: './ability.component.html',
  styleUrls: ['./ability.component.css']
})
export class AbilityComponent implements OnInit {

  @Input() human: Human;

  nameColor: string = "blue";

  PozycjaNaBoisku = PozycjaNaBoisku;

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

 <p>app.component work</p>
  <app-baza></app-baza>

<p>{{human.name}}</p>

<app-ability></app-ability>

<h1>{{humans[1].name}}</h1>
<p>ability works</p>

baza.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: `./app.component.html`,
  styles: []
})
export class AppComponent {

  constructor(){
  }

}

import { Component, OnInit } from '@angular/core';
import { Human, PozycjaNaBoisku } from '../model'

@Component({
  selector: 'app-baza',
  templateUrl: './baza.component.html',
  styleUrls: ['./baza.component.css']
})
export class BazaComponent implements OnInit {
  humans: Human[] = [
    {
    name: "Jordan",
    wzrost: 199,
    age: 23,
    pozycja: PozycjaNaBoisku.skrzydlowy,
    },
    {
      name: "Shaq",
      wzrost: 218,
      age: 34,
      pozycja: PozycjaNaBoisku.center,
    },
  ]

  human: Human = this.humans[0];

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit, Input } from '@angular/core';
import { Human, PozycjaNaBoisku } from '../model';

@Component({
  selector: 'app-ability',
  templateUrl: './ability.component.html',
  styleUrls: ['./ability.component.css']
})
export class AbilityComponent implements OnInit {

  @Input() human: Human;

  nameColor: string = "blue";

  PozycjaNaBoisku = PozycjaNaBoisku;

  constructor() { }

  ngOnInit() {
  }

}

baza.component.html

 <p>app.component work</p>
  <app-baza></app-baza>

<p>{{human.name}}</p>

<app-ability></app-ability>

<h1>{{humans[1].name}}</h1>
<p>ability works</p>

capability.component.html

 <p>app.component work</p>
  <app-baza></app-baza>

<p>{{human.name}}</p>

<app-ability></app-ability>

<h1>{{humans[1].name}}</h1>
<p>ability works</p>

{{humans[1].name}
能力发挥作用

---

这里h1不起作用

使用

templateUrl

代替

template

thx现在它的工作方式被重新编写，以使问题更加清晰和可操作。thx，我会做得更好