Angular组件新建和使用

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