Angular7 组件

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

文件结构有app组件，它由以下文件组成：

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

并且如果你在项目设置过程中选择了角度路由，那么与路由相关的文件也会被添加，文件如下：

应用程序路由.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

在命令行中运行上述命令时，会收到如下输出：

C:\projectA7\angular7-app>ng g 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 (477 bytes)

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

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

new-cmp.component.css：创建新组件的css文件。
new-cmp.component.html：创建html文件。
new-cmp.component.spec.ts：这个可以用于单元测试。
new-cmp.component.ts：在这里，我们可以定义模块、属性等。

更改已添加到 应用程序模块 .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'; 

// 包含我们创建的 new-cmp 组件
@NgModule({ 
    declarations: [
        AppComponent,
        NewCmpComponent
        // 这里它被添加到声明中，并将作为子组件运行
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
        bootstrap: [AppComponent]
        // 对于引导 AppComponent，给出了主要的应用程序组件。
}) 
export class AppModule { }

The 新 cmp.component.ts 文件生成如下：,

import { Component, OnInit } from '@angular/core'; // 这里 angular/core 被导入。

@Component({ 
    // 这是一个以@符号开头的声明符。
    // 加粗的组件字需要相同。
    selector: 'app-new-cmp', // 要在 .html 文件中使用的选择器。
    templateUrl: './new-cmp.component.html',
    // 引用在新组件中创建的 html 文件。
    styleUrls: ['./new-cmp.component.css'] // 引用样式文件。
}) 
export class NewCmpComponent implements OnInit {   
    constructor() { }
    ngOnInit() { }
}

如果你看到上面的 new-cmp.component.ts 文件，它会创建一个名为的新类 新Cmp组件 ，它实现了 OnInit，其中有一个构造函数和一个名为 ngOnInit() 的方法。执行类时默认调用 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 文件，我们看不到浏览器中打印的任何内容。我们将看一下正文部分中的标签。

<app-root></app-root>

这是 Angular 默认创建的根标签。这个标签在 main.ts file.

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 是从主父模块的app 中导入的，同样给bootstrap Module，使appmodule 加载。

现在让我们看看 app.module.ts file：

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

在这里， 应用组件 是给定的名称，即存储引用的变量 app.component.ts 引导程序也是如此。现在让我们看看 app.component.ts file.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
}) 
export class AppComponent { 
    title = 'Angular 7';
}

Angular 核心被导入并称为组件，在声明器中使用相同为：

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

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

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

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
    <h1> Welcome to {{ title }}! </h1>
</div>

它只有 html 代码和大括号中的变量标题。它被替换为存在于 app.component.ts 文件。这称为绑定。我们将在下一章讨论绑定的概念。

现在我们已经创建了一个名为 new-cmp 的新组件。同样被包含在 app.module.ts 文件，当运行命令以创建新组件时。

app.module.ts 具有对创建的新组件的引用。

现在让我们检查在 new-cmp 中创建的新文件。

新 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 标签。样式文件是空的，因为我们目前不需要任何样式。但是当我们运行项目时，我们看不到与新组件相关的任何内容显示在浏览器中。

浏览器显示如下画面：

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

<p>
    new-cmp works!
<p>

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

选择器' 应用程序新cmp ' 是为新组件创建的 新 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() { }
}

选择器，即 应用程序新cmp 需要在app.component.html中添加，即默认创建的main parent如下：

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
</div>
<app-new-cmp7></app-new-cmp>

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

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

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

在类中，我们添加了一个名为 新组件 并且值为“在创建的新组件中输入”。

上面的变量被添加到 新cmp.component.html 文件如下：

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

现在既然我们已经包括中的选择器 app.component.html 这是父组件的.html，内容存在于 新cmp.component.html 文件显示在浏览器上。我们还将在 new-cmp.component.css 文件中为新组件添加一些 css，如下所示：

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

所以我们为 p 标签添加了蓝色和字体大小为 25px。

浏览器会显示如下画面：

同样，我们可以在 app.component.html 按照我们的要求归档。

< 上一篇（Angular7 项目设置）

下一篇（Angular7 模块） >

Angular7 教程

Angular7 组件