Angular 6 组件
Angular 6开发的主要部分是在组件中完成的。组件是与html文件交互的类。我们已经在前面的章节中看到了文件结构。文件结构包含应用程序组件,它由以下文件组成:
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
当我们使用angular-cli命令创建新项目时,上述文件是默认创建的。
如果你打开了app.module.ts文件,它有一些被导入的库,还有一个declarations被分配给appcomponent,如下所示:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
声明包括AppComponent变量,我们已经导入了该变量。这将成为父组件。
现在,angular-cli提供一个命令来创建自定义组件。但是,默认情况下创建的应用程序组件将始终保持父组件,下一个创建的组件将形成子组件。
现在让我们运行命令来创建组件。
ng generate component new-cmp
当您在命令行中运行上述命令时,您将看到以下输出:
D:\Node\Angular6App>ng generate component new-cmp CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) UPDATE src/app/app.module.ts (398 bytes)
现在,如果我们去检查文件结构,我们会发现在src/app 文件夹下创建了new-cmp文件夹。
下面是new-cmp文件夹的文件列表:
new-cmp.component.css − 新组件的CSS文件
new-cmp.component.html − 新组件的html文件
new-cmp.component.spec.ts − 用于单元测试。
new-cmp.component.ts − 在这里,我们可以定义模块、属性等。
按如下方式把自定义组件添加到app.module.ts文件中:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; // includes the new-cmp component we created @NgModule({ declarations: [ AppComponent, NewCmpComponent // here it is added in declarations and will behave as a child component ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given. }) export class AppModule { }
new-cmp.component.ts文件内容如下:
import { Component, OnInit } from '@angular/core'; // here angular/core is imported . @Component({ // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same. selector: 'app-new-cmp', // templateUrl: './new-cmp.component.html', // reference to the html file created in the new component. styleUrls: ['./new-cmp.component.css'] // reference to the style file. }) export class NewCmpComponent implements OnInit { constructor() { } ngOnInit() {} }
上面的new-cmp.component.ts文件,它创建了一个名为NewCmpComponent的新类,该类实现了OnInit.In,它有一个构造函数和一个名为gOnInit()的方法。默认情况下,在执行类时调用ngOnInit。
让我们检查一下工作流。现在,默认情况下创建的应用程序组件成为父组件。以后添加的任何组件都将成为子组件。
当我们在浏览器中访问http://localhost:4200/时,它首先执行index.html文件,如下所示:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>Angular 6 Application</title> <base href = "/"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
以上是普通的html文件,我们在浏览器中没有看到任何打印的内容。看看body部分的标签。
<app-root></app-root>
这是Angular创建的root标记。这个标签在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);
AppModule是从主父模块的应用程序中导入的,bootstrap模块也是如此,这使得AppModule可以被加载。
现在让我们看一下app.module.ts文件:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; @NgModule({ declarations: [ AppComponent, NewCmpComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
这里,AppComponent是给定的名称,存储app. Component.ts引用的变量,同样的变量被提供给bootstrap程序。现在让我们看看app.component.ts。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 6 Project!'; }
Angular core被导入并被称为组件,在声明器中定义:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
在选择器的声明引用中,给出了TemplateURL和StyleURL。这里的选择器只不过是放置在我们上面看到的index.html文件中的标签。
AppComponent类有一个名为title的变量,它显示在浏览器中。
@Component使用名为app.component.html的模板,内容如下所示:
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1> Welcome to {{title}}. </h1> </div>
它只有html代码和用大括号括起来的title变量,它会被app.component.ts 文件中的值替换。这称为绑定。我们将在下一章讨论绑定的概念。
现在我们已经创建了一个名为new-cmp的新组件 当运行创建新组件的命令时,同样的内容会包含在app.module.ts文件中。
app.module.ts引用了创建的新组件。
现在让我们检查new-cmp中创建的新文件。
new-cmp.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-new-cmp', templateUrl: './new-cmp.component.html', styleUrls: ['./new-cmp.component.css'] }) export class NewCmpComponent implements OnInit { constructor() { } ngOnInit() {} }
在这里,我们也必须导入core组件,组件的引用在声明器中使用。
声明器具有名为app-new-cmp的选择器以及templateUrl和styleUrl.。
new-cmp.component.html包含如下内容:
<p> new-cmp works! </p>
如上所述,我们有html代码,即p标签,样式文件是空的,因为我们目前不需要任何样式。但是当我们运行项目时,我们没有看到任何与新组件相关的内容在浏览器中显示。现在让我们添加一些内容,同样的内容可以在以后的浏览器中看到。
选择器,即app-new-cmp需要添加到应用组件中.html文件如下所示
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <app-new-cmp></app-new-cmp>
当<app-new-cmp></app-new-cmp>标签被添加时,所有内容都将显示在其中。创新组件的.HTML文件将与父组件数据一起显示在浏览器上。
让我们看看new-cmp.html文件和new-cmp.component.ts文件。
new-cmp.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-new-cmp', templateUrl: './new-cmp.component.html', styleUrls: ['./new-cmp.component.css'] }) export class NewCmpComponent implements OnInit { newcomponent = "Entered in new component created"; constructor() {} ngOnInit() { } }
在类中,我们添加了一个名为new component的变量,其值为“Entered in new component created”。
上述变量绑定在中,new-cmp.component.html 文件如下
<p> {{newcomponent}} </p> <p> new-cmp works! </p>
现在,因为我们已经在应用中加入了<app-new-cmp></app-new-cmp>选择器到app. component .html ,这是父组件的HTML,新组件中的.html文件((new-cmp.component.html)在浏览器上显示如下
同样,我们可以根据我们的要求,使用app.component.html文件中的选择器创建组件并链接组件。