Угловые герои учебникcss селектор

Question

в уроке Angular https://angular.io/tutorial/toh-pt1#selector, Я не понимаю предложение: «Селектор элемента CSS, app-heroes, соответствует имени элемента HTML, который идентифицирует этот компонент в шаблоне родительского компонента».Я не знаю, каково это для селектора CSS, потому что я не могу найти ничего, что соответствует названию какого-либо элемента HTML ... нет элемента HTML с именем app-heroes или подобным ... Как это работает?

У меня есть только структура папок / src / app / heroes, в которой определены компоненты моих героев.Создает ли оно имя, состоящее из "parentfolder-folder"?и на что конкретно ссылается селектор элемента css?

Answer 1

Я не понимаю предложение: «Селектор элемента CSS 'app-heroes' соответствует имени элемента HTML, который идентифицирует этот компонент в шаблоне родительского компонента."

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

Как вы можете видеть в @Component, он определяет selector со значением app-heroes, это означает, что вы будете использовать app-heroes, чтобы быть похожим на элемент HTML (например, <div> </div>, поэтому вы будете использовать <app-heroes></app-heroes>) чтобы можно было показывать вид компонента Героев.

Answer 2

Прокрутите вниз там, где написано Show the HeroesComponent view.Там вы увидите HTML:

<h1>{{title}}</h1>
<app-heroes></app-heroes>

Итак, ваш селектор CSS app-heroes соответствует этому узлу HTML <app-heroes></app-heroes>.То же, что селектор CSS h1{} соответствует <h1></h1>