FLI

Создание простого Angular 2 компонента

При работающем сервере, пойдем дальше. Откроем новую вкладку в терминале в той же папке проекта. Сгенерируем новый компонент. Компонент будет называться 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, как и в шаблонах.