WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

Angular 6 framework component

Angular 5 компоненты (Angular components)

Компонент - базовый элемент структуры Angular - приложения

  • создать компонент
  • зарегистрировать в модуле
  • добавить HTML elelement в шаблон

Самый простой компонент - один файл:

import { Component} from '@angular/core'; @Component({ selector: 'comp1', template: '<h1>Comp1Component</h1>' }) export class Comp1Component { }

Регистрация в модуле

app.module.ts

import { Comp1Component } from './comp1/comp1.component';

и

@NgModule({ declarations: [ AppComponent, Comp1Component ],


Дальше в шаблоне можно использовать тег <comp1>

Создать компонент Angular 5

Внутри папки app создать папку для компонента

component2

В этой папке создать TypeScript файл с описанием класса компонента

component2.component.ts

import {Component} from "@angular/core"; @Component ({ selector : 'app-test2', templateUrl: './test2.component.html', styleUrls: ['./test2.component.css'], }) export class Test2Component{ }


Строка 

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

импортирует декоратор компонента из библиотеки Angular core

Создать файлы шаблона и стиля компонента (test2.component.html и test2.component.css)

В файле описания модуля (app.module.ts) мпортировать новый компонент, используя имя файла с его описанием без расширения ts 

  (import { Test2Component } from './test2/test2.component';) 

и зарегистрировать новый компонент в в секции declarations декоратора модуля - @NgModule 


@NgModule({ declarations: [ AppComponent, Test2Component ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


Добавить вызов нашего компонента в шаблон главного компонента приложения (app.component.html)

<app-test2> </app-test2>

Компоненты могут быть вложенными.

Компонент можно использовать несколько раз.

Например:

<app-test2> </> <app-test1> </app-test1> <app-test1> </app-test1> </app-test2>

Селектор компонента

В декораторе компонента одно из свойств - селектор компонента.

По этому свойству Angular определяет, в какое место шаблона компонент должен быть помещён.

В качестве селектора обычно используется имя тега,  который будет идентифицировать компонент в шаблоне.

selector : 'app-test2-component',

Место компонента в шаблоне в этом случае должно быть задано тегом:

<app-test2> </app-test2>

Но можно также использовать название атрибута тега

selector : '[app-test2]',

или название класса

selector : '.app-test2]',

Место компонента в шаблоне в этом случае может быть задано как :

<div app-test2> </div>

или

<span class="app-test2"> </span>