Angular学习笔记之组件篇

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '我的世界';
  }
}

其中input作为@Component的元数据，那么还有另外一种写法，之后的输出也一致

其中一段代码

@Component({
  selector: 'app-single-component',
  inputs:['name'],
  template: `
  <div>
    这个是子组件 ：{{name}}
  </div>
  `
})

输出使用方式：输出的方式或许用广播/订阅来说更加合适。

single-component.component.ts改

@Component({
  selector: 'app-single-component',
  template: `
  <div>
    这个是子组件 ：{{name}}
    <button (click)="sendMessage()" >点我</button>
  </div>
  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter<string>;

  ngOnInit () {
  }

  constructor () {
    this.value = '来源于组件的值';
    this.emotter = new EventEmitter<string>();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}

app.component.ts改

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple" (emotter)="getComponentData($event)"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '我的世界';
  }

  getComponentData (message: string): void {
     console.log(`获取到子组件中的值：${message}`);
  }
}

host:用于在元素行配置元素属性

值为json对象key-value，并且作用只做作用于当前组件内部，常用来添加class.

styleUrls:层叠样式表url，值位数组，可以传多个。

当然必要的，在需要用到的component的模块中引入：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在声明里面
  ],
  imports: [
    browserModule // 引入的模块
  ],
  PRoviders: [],
  bootstrap: [AppComponent] //引导应用的根组件
})
export class AppModule { }

关于@component的元数据还未完全，所以后面会继续完善。

源代码git地址