При работающем сервере, пойдем дальше. Откроем новую вкладку в терминале в той же папке проекта. Сгенерируем новый компонент. Компонент будет называться Simple Form, и мы создадим его с флагами --inline-template и --inline-style. Эти флаги позволят модифицировать компонент в одном файле.
Терминал
$ ng generate component simple-form --inline-template --inline-style
Или можно воспользоваться сокращенной формой команды, которая делает тоже самое.
Терминал
$ ng g c simple-form -it -is
После нажатия Enter, команда сгенерирует два файла. Файл компонента и файл для тестов. Давайте посмотрим на этот компонент.
В проекте по пути src/app/ находится папка simple-form с нашим новым компонентом внутри. Откроем его и увидим селектор app-simple-form.
simple-form.component.ts
@Component({
selector: 'app-simple-form',
template: `
<p>
simple-form Works!
</p>
`,
styles:[]
})
export class SiompleFormComponent implements ngOnInit {
constructor() { }
ngOnInit(){
}
}
В нашем AppComponent, в шаблоне просто добавим div и затем <app-simple-form> внутри, для инициализации компонента.
app.component.ts
@Component({
selector: 'app-root',
template: `<div>
<app-simple-form></app-simple-form> // simple-form Works!
</div>`
})
export class AppComponent {
title = `Hello World`;
}
Сохраним изменения. Как только браузер перезагрузится мы увидим текст "simple-form Works!". Надпись приходит из компонента app-simple-form. Нужно заметить, что мы называли компонент simple-form, a префикс app- добавляется из конфигурационного файла Angular CLI-json.
Префикс необходим для предотвращения конфликтов в пространствах имен с другими проектами. Вы можете использовать любые префиксы.
Если вы посмотрите на селектор в simple-form.component, то увидите app-simple-form. В app.component вы увидите app-root, который используется внутри файла index.html.
index.html
<body>
<app-root>Loading...</app-root>
</body>
Мы видим <app-root>. Если открыть Chrome dev tools, мы увидим такую же иерархию компонентов app-root, app-simple-form, как и в шаблонах.
0 отзывов :
Отправить комментарий