Angular组件新建和使用

您所在的位置：网站首页 › angular新建项目的命令 › Angular组件新建和使用

Angular组件新建和使用

2023-08-11 09:24| 来源: 网络整理| 查看: 265

Angular组件新建和使用

（1）新建自定义组件例（login.ts）

/*Vue.component('my-login',{})*/ import {Component} from '@angular/core' /*此处的Component是一个“装饰器” 用来表明对象的作用*/ @Component({ selector:'my-login', //原数据 template:'管理员登录' //原数据 }) export class Login { }

（2）注册自定义组件，文件中(app.module.ts)

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {Login} from "./1_login"; import {Main} from './2_main'; @NgModule({ declarations: [ AppComponent,Login,Main ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

（3）在模板文件中使用（app.component.html）

这是根组件模板

二、命令行创建组件：

先注册ng命令后，可使用 ng g component 注册新组件

【本文地址】

Angular组件新建和使用

Angular组件新建和使用

今日新闻

推荐新闻