Angular2, где указана директива AppComponent

Question

Я начинаю работу с Angular2, и после того, как я закончил учебник, у меня возник вопрос. Говорят, что A browser ignores HTML tags and attributes that it doesn't recognize. So does Angular. И поэтому вам нужно добавить что-то вроде: directives: [MyComponent] внутри компонента, если вы хотите использовать созданный вами тэг (например, другой компонент). Тогда мой вопрос: почему нам не нужно то же самое для AppComponent. Как Angular знает о теге my-app (селектор моего AppComponent).

Это благодаря main.ts, где есть бутстрап AppComponent? :

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 

bootstrap(AppComponent); 

Answer 1

с переходом AppComponent к bootstrap() вы делаете AppComponent известно Угловое. bootstrap() затем обрабатывает AppComponent как он был добавлен к directives родительского компонента (которого не существует).

Корневой компонент добавляется DynamicComponentLoader.loadAsRoot(), который имеет основную цель - создать экземпляр корневого компонента и добавить его в DOM.

Answer 2

Это из-за способа bootstrap работ. Основной HTML-файл не компилируется в отличие от шаблонов компонентов. Таким образом, основной компонент прикрепляется к элементу HTML в этом файле, используя его селектор.

Вы создаете экземпляр Углового приложения, явно указывая компонент, который будет использоваться в качестве корневого компонента для вашего приложения с помощью метода bootstrap().

Приложение загружается в существующий браузер DOM, обычно index.html. В отличие от Angular 1, Angular 2 не компилирует/обрабатывает поставщиков в index.html. Это связано главным образом с соображениями безопасности, а также с архитектурными изменениями в Angular 2. Это означает, что index.html можно безопасно обрабатывать с использованием серверных технологий, таких как поставщики.