开发学院

您的位置：首页>教程>正文

教程正文

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)在浏览器上显示如下

using_selector_browsers_output.jpg

  同样，我们可以根据我们的要求，使用app.component.html文件中的选择器创建组件并链接组件。


捐赠

友情链接