index.html与角度2中的app.component.html模板集成

Question

$event.target/currentTarget

如上面的代码所示，当编译器在import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = 'TEST-convinience'; } 文件中找到选择器<app-root>时，它会与模板index.html集成并呈现其视图。

进行这种集成有什么好处和好处？

相反，我们可以使用app.component.html来创建视图。

Answer 1

要回答你的问题，你需要了解一下Angular的bootstrap过程。当Angular引导应用程序时，它会查找根模块中列出的bootstrap组件：

Angular将首先加载指示的

来启动应用

platformBrowserDynamic().bootstrapModule(AppModule);

在该模块中，Angular将查找引导程序数组中列出的组件：

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ] // this is the next step
})
export class AppModule { }

接下来，分析引导程序组件。那是Angular学习它的选择器的时候：

@Component（{   选择器：'app-root'，   templateUrl：'。/ app.component.html'， }） export class AppComponent { }

现在Angular知道它应该在网页（index.html）中查找<app-root></app-root>，并将此元素替换为AppComponent模板

<app-root>loading</app-root>

好的，现在假设你想让index.html成为应用程序组件模板，你会把它放在哪里？如果你把<app-root>放在那里，你将最终得到一个无限循环，因为组件不断在自己的模板中创建。如果你没有把<app-root>放在那里，那么你会把它放在哪里以便Angular知道在哪里加载应用程序？

基本上，根组件需要嵌入到一个vanilla html文档中，以便Angular知道在网页中构建应用程序的位置。

Answer 2

我想澄清一些疑问。

(1)Angular is all about `components`.It uses a `hierarchy of components` as 
    its main `architectural concept`.
(2)Modularity – much core functionality has moved to modules, producing a 
   lighter, faster core.

组件主要处理view of the application和logic on the page。该组件包含两个重要的事项：a view（。html）和some logic（。ts）。

在Simple中，您可以将组件理解为一个独立且独立的视图，可以与其他组件一起使用（通过将组件选择器作为<my-app></my-app>传递）

假设您创建了一个＆＃39;日历组件＆＃39;并实现了所有逻辑，并且它作为一个单独的组件完美地工作，然后您可以在其他＆＃39; modules＆＃39;中使用此组件。或者在任何其他'app'中。

现在，为什么要在index.html中传递选择器？ 因为： -

（1）在angular through命令中创建新项目时 ng new PROJECT-NAME（请参阅https://github.com/angular/angular-cli），然后默认创建一个app.module.ts的模块（父级）  模块）。

并且，app.component.ts的选择器会在创建新项目时自动传递到index.html。

看看： -

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

问题的答案在项目的main.ts中，默认情况下是在创建项目时创建的。

现在，在main.ts： -

1) Parent Module is imported as `import { AppModule } from './app/app.module';`  (Since default single module created
2)By default('default' refers to when a new project is created), then...
 `platformBrowserDynamic().bootstrapModule(AppModule)`.
      This statement bootstrap Module which is passed as a parameter inside it(by default, 'AppModule' ).
      It means it will load the `module` which is bootstraped as a parameter.

现在，在app.module.ts中，在创建新项目时创建的唯一默认组件是app.component.ts。现在，我们必须查看app.component.ts模板，即app.component.html，因此，选择器将作为<app-root></app-root>传递。 （传递选择器参考视图，这是一个角度的概念）。

希望有所帮助。