Angular根部组件的学习教程

今天你吸猫了么
262 阅读4分钟

在本教程中，我们将学习Angular是如何引导一个应用程序运行的。 这是由根模块和根组件共同作用的结果。 根组件是第一个被引用的组件，并在主index.html网页中托管。 Angular中的所有其他东西都是基于这个根模块的，所以仔细看看这个根组件是如何工作的会有帮助。

当你在angular中创建一个新项目时，根组件在哪里？ 如果你使用Angular CLI为你搭建项目的脚手架，一个 app它由一个app文件夹和该angular组件所需的文件组成。
angular root app component

定义组件类

我们可以删除app.component.ts文件中的默认标记，因为我们要从头开始。 我们首先从定义这个类开始。 export关键字允许我们在应用程序的其他部分使用这个类。 该 pageTitle属性将被用来设置页面的标题。

export class AppComponent {
    pageTitle = 'Angular Games Viewer';
}

定义组件装饰器

接下来我们要定义组件装饰器，它就在类定义的上方。

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

@Component({})
export class AppComponent {
    pageTitle = 'Angular Games Viewer';
}

根据你所使用的IDE，你可能会看到一条信息，说明ng:组件'AppComponent'必须有一个模板或模板Url。 这是真的，因为任何Angular组件*必须*有一个相关的模板。 我们之前了解到，这可以是内联模板的形式，也可以是一个单独的文件。 你可以使用你喜欢的任何一种，但必须有一个。

传入组件的元数据

这就是你如何定义该模板的方法。 它是组件元数据的一部分。 然而，首先你要为组件的名称指定一个选择器，当作为模板文件的指令使用时。 由于我们正在制作一个与游戏有关的应用程序，我们将使用游戏这个前缀。 此外，由于这是根组件，我们将分配一个后缀为root。 这看起来像这样。

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

@Component({
    selector: 'game-root'
})
export class AppComponent {
    pageTitle = 'Angular Games Viewer';
}

注意：如果你看到一个错误，如*组件 "AppComponent "的选择器应该有前缀 "app"，*这只是意味着你需要更新angular.json和tslint.json中的前缀设置。

设置内联模板

对于这个根组件，我们将使用ES6 Back Ticks的内联模板。

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

@Component({
    selector: 'game-root',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>Game app root component</div>
    </div>`
})
export class AppComponent {
    pageTitle = 'Angular Games Viewer';
}

Bootstrap根部组件

上面的部分已经为Angular中一个虚构的游戏应用定义了一个根组件。 在使用该组件之前，还有一个步骤需要完成，那就是引导组件。 Angular有一个index.html文件，它是应用程序的主页面。 事实上，它通常是整个应用程序的唯一网页。 在用户看来，有很多页面，但实际情况是html被动态地从这个单一的index.html页面插入和移除。 这就是为什么这些类型的应用程序被称为单页应用程序。 在这里我们可以看到组件中的选择器和它在html中的引用之间的关系。
angular selector and directive

在html标记中，当我们使用自定义html时，在我们的例子中，它被称为指令。 我们在angular中也有结构指令。 现在Angular如何知道如何处理这样的自定义html元素呢？ 它从Angular模块中寻找答案。 Angular模块是用来将一个应用程序组织成功能块的。 不要把它们与ES6模块混淆，那是完全不同的。 是Angular模块对组件进行Bootstraps。 你也可能听到这被称为 "注册组件"。 对于这个组件，引导发生在app.module.ts中。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: \[ AppComponent \] 。\[ AppComponent \], imports:\[ BrowserModule \], bootstrap: \[AppComponent\] }) export class AppModule { }

一个Angular模块是用一个带有export关键字的类来识别的。 这个类通过使用@NgModule装饰器而成为一个模块。 就像一个组件使用@Component装饰器一样，一个模块也使用@NgModule装饰器。 @NgModule装饰器的属性是数组。 declarations数组定义了哪些组件属于这个模块。 导入数组定义了需要提供给这个angular模块中任何组件的外部模块。 这些可能是angular模块，第三方模块，或自定义定义的模块。 最后，bootstrap数组定义了应用程序的起始组件，当然就是我们的AppComponent。

我们现在可以通过从我们的应用程序根目录中运行ng serve来测试这一点。
Angular 根组件演示
这并不令人难以置信，但这是一个开始! 我们可以检查 Chrome 开发者工具，以了解更多关于这一工作的信息。
我们可以看到，我们的自定义 标签现在已经在开头和结束标签之间插入了相关模板 html。酷！

总结

Angular是由组件组成的。 这些组件是由Typescript中的一个类定义的，该类用@Component Decorator来增强。 每个组件可以导入任何需要的东西来完成它的工作。 在本教程中，我们看了一下根组件，并看到了如何使用app.module.ts模块来引导它。

avatar
文章
阅读
粉丝