Angular 7开发的主要部分是在组件中完成的。组件是与组件的.html文件进行交互的类,该文件会显示在浏览器中。
该文件结构具有app组件,并且由以下文件组成-
并且,如果您在项目设置过程中选择了Angular Routing,则还将添加与Routing有关的文件,这些文件如下所示:
当我们使用angular-cli命令创建新项目时,以上文件是默认创建的。
如果打开 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'; @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)
现在,如果我们检查文件结构,我们将在 src/app 文件夹下获得new-cmp new文件夹。
以下文件在new-cmp文件夹中创建-
更改将添加到 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 的新类,该类将实现OnInit,其中包含一个构造函数和一个名为ngOnInit()的方法。执行该类时,默认情况下会调用ngOnInit。
当我们在" http://localhost:4200 /" 浏览器中点击url时,它首先执行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 文件中具有引用。
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,并将相同的内容提供给引导模块,这会导致appmodule加载。
现在让我们看一下 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 的引用的变量,并且对引导程序也是如此。现在让我们查看 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/core 被导入并称为Component,并且在Declarator中使用的是-
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
在声明器对selector的引用中,给出了templateUrl和styleUrl。这里的selector不过是我们上面看到的位于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 文件中也会包含相同的内容。
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() { } }
在这里,我们也必须导入核心(angular/core),该组件的引用在声明器中使用,声明程序具有名为app-new-cmp的selector以及templateUrl和styleUrl。
名为new-cmp.component.html的.html如下-
<p> new-cmp works! </p>
如上所示,我们有html代码,即p标签。样式文件为空,因为我们目前不需要任何样式。但是,当我们运行项目时,在浏览器中看不到与新组件相关的任何内容。
链接:https://www.learnfk.comhttps://www.learnfk.com/angular7/angular7-components.html
来源:LearnFk无涯教程网
我们没有看到与正在显示的新组件相关的任何内容。创建的新组件具有一个.html文件,其中包含以下详细信息-
<p> new-cmp works! <p>
但是我们在浏览器中并没有得到相同的输出。现在让我们查看获取新组件内容以在浏览器中显示所需的更改。
selector '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() { } }
selector即 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-cmp></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 { 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>
现在,由于我们在父组件的.html(即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的蓝色和字体大小。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Tony Bai · Go语言第一课 -〔Tony Bai〕