首頁 > 文章 > web前端 > Angular怎麼建構元件？ 3種方法介紹

Angular怎麼建構元件？ 3種方法介紹

青灯夜游轉載: 2021-08-12 10:32:566820瀏覽

Angular怎麼建構組件？本篇文章為大家介紹一下Angular創建專案的方法，Angular創建元件的三種方式。

一、angular 與angularjs的差別是什麼？

命名變化，Angular2 以後官方命名為Angular, 2.0 先前的版本稱為AngualrJS。【相關教學推薦：《angular教學》】
1.x 的使用方式是引入AngularJS 的js 檔案到網頁，2.0 之後就完全不同了，兩者的差異類似Java 和JavaScript。

Angular怎麼建構元件？ 3種方法介紹

二、建立一個項目

1.安裝全域的Angular CLI 命令列工具

npm install -g @angular/cli

2.建立專案

ng new angular-tour-of-heroes

注意：node 版本需要在12以上，否則會提示：「'ng' 不是內部或外部指令，也不是可執行的程式或批次檔。 ”

3.跑專案

cd angular-tour-of-heroes
ng serve --open

Angular怎麼建構元件？ 3種方法介紹

#三、建立元件的第一種方式：

#1.src檔案下，新文件，命名hello-world.component.ts

import { Component } from "@angular/core";

@Component({
    selector: &#39;hello-world组件&#39;,
    // templateUrl: &#39;./app.component.html&#39;,
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

Angular怎麼建構元件？ 3種方法介紹

2.app.component.html中或app.component.ts中新增元件標籤

Angular怎麼建構元件？ 3種方法介紹

// 引入ng核心包和组件
import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

3.app.module.ts中引入元件，宣告元件

Angular怎麼建構元件？ 3種方法介紹