1、创建项目
npm install -g @angular/cli ng new my-app cd my-app ng serve --open // 或者 npm start
2、生成新模块
ng generate component heroes
3、引入双向绑定模块儿 app.module.ts 中添加
import { FormsModule } from '@angular/forms' // @NgModule 中 imports: [ BrowserModule, FormsModule ]
4、父组件和子组件的交互
父页面中:
<app-hero-detail [hero]="selectedHero" ></app-hero-detail>
子组件中:
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit { @Input() hero constructor() { console.log('===>',this.hero) } ngOnInit() { } }
5、生成service
ng generate service hero //--module=app 限定service 作用的等级