上一节，我们学会了怎么安装anglarjs2，过程有点曲折，但总的来讲，她跑起来了，而且看见了那红红的图标。

这一节，我们主要来了解组件，

组件是什么呢？

1.新建一个组件：

执行这个命令  ng g c hello 

一个叫hello的组件就建好了。

PS C:\angularjs\my-app> ng g c hello

installing component

  create src\app\hello\hello.component.css

  create src\app\hello\hello.component.html

  create src\app\hello\hello.component.spec.ts

  create src\app\hello\hello.component.ts

  update src\app\app.module.ts

PS C:\angularjs\my-app>

  2.修改一下，增加点内容

修改hello.component.ts

加入这么一句

msg="hello world!"

最后文件变成这样的。

import { Component, OnInit } from '@angular/core';



@Component({

  selector: 'app-hello',

  templateUrl: './hello.component.html',

  styleUrls: ['./hello.component.css']

})

export class HelloComponent implements OnInit {



msg="hello world!"

  constructor() {





   }



  ngOnInit() {

    

  }



}

			


				

				


					  

				



			

修改一下

hello.component.html

<p>

 {{msg}}

</p>

3.引用这个组件

首先要知道，我们这个组件的selector名字

然后，要注意，在我们执行新建命令时，程序已自动给我们创建的新的组件加到了app.module.ts

所以，我们就可以在app.component.html 中通过选择器来引用它了。

<div style="text-align:center">

  <h1>

    Welcome to {{title}}!

  </h1>



  <app-hello></app-hello>

</div>

这就是最后的效果，可以看到。我们做的第一个组件，已成功运行了。

您的支持将鼓励我们继续创作！

微信支付

支付宝

用 [微信] 扫描二维码打赏

用 [支付宝] 扫描二维码打赏