Angular组件新建和使用
(1)新建自定义组件 例(login.ts)
/*Vue.component('my-login',{})*/
import {Component} from '@angular/core'
/*此处的Component是一个“装饰器” 用来表明对象的作用*/
@Component({
selector:'my-login', //原数据
template:'<h3>管理员登录</h3><hr>' //原数据
})
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)
<h2>这是根组件模板</h2>
<hr>
<my-login></my-login>
<my-main></my-main>
二、命令行 创建组件 :
先注册ng命令后,可使用 ng g component 注册新组件