Angular : 創建自定義組件

  1. ng generate hello-world 命令生成 hello-world 組件

    這裏寫圖片描述

  2. 在hello-world.component.ts中定義組件

    這裏寫圖片描述

    代碼貼在文章末尾:代碼1

  3. 在app.component.html中使用剛定義好的組件(標籤)

    這裏寫圖片描述

    代碼貼在文章末尾:代碼2

  • 代碼1

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

@Component({
  selector: 'app-hello-world',
  template:
        `<p>
          hello-world works!
        </p>
        `
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

  • 代碼2

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章