Как создать новый файл HTML в Angular8

Question

Я создал новый файл в 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 }'
  ]
})

Есть идеи, что мне здесь не хватает?

Answer 1

У меня новая проблема.Я хочу использовать объект из другого компонента в файле "ility.component.html ".Это выглядит так: app.component.ts

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

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

  constructor(){
  }

}

app.component.html

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

model.ts

export interface Human {
    name: string,
    wzrost: number,
    age: number,
    pozycja: PozycjaNaBoisku,
}

export enum PozycjaNaBoisku {
    rozgrywajacy,
    skrzydlowy,
    center,
}

baza.component.ts

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

}

baza.component.html

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

<app-ability></app-ability>

able.component.ts

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

}

able.component.html

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

а тут h1 не работает

Answer 2

шаблон: './app.component.html', замените `на '