开发学院

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

教程正文

Angular7：组件

  Angular 7的开发主要是在组件中完成的。组件基本上是与组件的.html文件交互的类，该文件显示在浏览器上。我们在前面的章节中已经看到了文件结构。

  文件结构包含应用程序组件，由以下文件组成

  • app.component.css

  • app.component.html

  • app.component.spec.ts

  • app.component.ts

  • app.module.ts

  如果您在项目设置过程中选择了angular路由，也将添加与路由相关的文件，这些文件如下:

  app-routing.module.ts

  当我们使用angular-cli命令创建新项目时，默认情况下会创建上述文件。

  如果您打开app.module.ts文件，它有一些导入的库，还有一个声明性的库，它被分配给appcomponent如下

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

  这些声明包括我们已经导入的AppComponent变量。这将成为父组件。

  现在，angular-cli有一个创建自己组件的命令。但是，默认情况下创建的应用程序组件将始终是父组件，下一个创建的组件将形成子组件。

  现在让我们运行该命令，用下面一行代码创建组件

ng g component new-cmp

  当您在命令行中运行上述命令时，您将收到以下输出。


  现在，如果我们去检查文件结构，我们将在src/app文件夹下新创建的new-cmp文件夹。

  以下文件是在new-cmp文件夹中创建的

new-cmp.component.css − css file for the new component is created.

new-cmp.component.html − html file is created.

new-cmp.component.spec.ts − this can be used for unit testing.

new-cmp.component.ts − here, we can define the module, properties, etc.

  更改被添加到app.module.ts文件，如下所示：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   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', // selector to be used inside .html file. 
   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的新类，该类实现了一个有一个构造函数和一个名为ngOnInit()的方法的OnInit。在执行类时，默认情况下会调用ngOnInit。

  让我们检查一下流程是如何工作的。现在，默认情况下创建的应用程序组件成为父组件。稍后添加的任何组件都将成为子组件。

  当我们在“http://localhost:4200/”浏览器中点击该网址时，它首先执行如下所示的index.html文件

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</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).catch(err => console.error(err));

  AppModule是从主父模块的应用程序中导入的，bootstrap模块也是如此，bootstrap模块使应用模块加载。

  现在让我们看看app.module.ts文件

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

  这里，AppComponent是给定的名称，即存储应用程序引用的变量。现在让我们看看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 7'; 
}

  Angular核心被导入并称为组件，在声明器as中也是如此

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})

  在对选择器的声明符引用中，给出了templateUrl和styleUrl。这里的选择器只不过是放在我们上面看到的index.html文件中的标签。

  类AppComponent有一个名为title的变量，它显示在浏览器中。@Component 使用名为app.component.html的模板Url，如下所示

<!--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() { } 
}

  在这里，我们也必须导入核心，组件的引用在声明器中使用。

  声明者有一个名为app-new-cmp的选择器以及templateUrl和styleUrl。

  名为new-cmp.component.html的.html如下：

<p> 
   new-cmp works!
</p>

  如上所述，我们有html代码，即p标签。样式文件是空的，因为我们目前不需要任何样式。但是当我们运行项目时，我们看不到任何与浏览器中显示的新组件相关的内容。

  浏览器显示内容如下：

screen.jpg

  我们没有看到任何与正在显示的新组件相关的内容。创建的新组件有一个包含以下详细信息的. html文件

<p>
   new-cmp works!
<p>

  但是我们在浏览器中没有得到同样的结果。现在让我们来看看在浏览器中显示新组件内容所需的更改。

  选择器“app-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() { } 
}

  选择器，即app-new-cmp需要添加到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>
<app-new-cmp7gt;</app-new-cmp>

  添加<app-new-cmp></app-new-cmp>标签后，.html 文件中的所有内容，即创建的新组件的new-cmp.component.html，将与父组件数据一起显示在浏览器上。

new_cmp.jpg

  让我们为创建的新组件添加更多细节，并在浏览器中查看显示。

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() { }
}

  在这个类中，我们添加了一个名为newcomponent的变量，其值是“Entered in new component created”。

  上述变量被添加到new-cmp.component.html文件中，如下所示

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

  现在，由于我们已经在app.component.html中包含了<app-new-cmp></app-new-cmp>选择器，new-cmp.component.html文件中的内容将显示在浏览器上。我们还将在new-cmp.component.css文件中为新组件添加一些css，如下所示：

p { 
   color: blue; 
   font-size: 25px; 
}

  我们为p标签增加了蓝色和字体大小作为25px。

  浏览器中将显示以下屏幕

color_font.jpg

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


捐赠

友情链接