Angular : 创建自定义组件

最新推荐文章于 2024-05-14 11:07:32 发布

原创最新推荐文章于 2024-05-14 11:07:32 发布 · 置顶 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

Angular2 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Angular CLI生成一个名为hello-world的基本组件，并演示了如何在主应用组件中引入及使用该新组件。

用 ng generate hello-world 命令生成 hello-world 组件
在hello-world.component.ts中定义组件

代码贴在文章末尾：代码1
在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';
}