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 注册新组件