如何在Angular2中的其他組件內創建組件

Question

我需要使用模板中的指令將一個複雜的組件拆分爲兩個或更多個簡單的組件。

Answer 1

這裏是如何實現這種方式。

MainComponent.ts

import { Component } from '@angular/core'; 
import { MyService1 } from '../../providers/myService1/myService1'; 
import { MyCmp1 } from '../../components/myCmp1/myCmp1'; 

@Component({ 
    templateUrl: 'build/pages/mainComponent/mainComponent.html', 
    providers: [ 
     MyService1 
    ], 
    directives: [ 
     MyCmp1 
    ], 
    //pipes: [ ... ] // Pipes which you are using 
}) 
export class MainComponent { 
    main: any; 

    constructor() { 
     this.load(); 
    } 

    load(): void { 
     MyService1.loadData() 
      .then((response) => { 
       main.data1 = response; 
      }); 
    } 

    onShowMe(data): void { 
     alert(data); 
    } 
} 

MainComponent.html

<div class="main-component"> 
    <h1>Main Component</h1> 
    <my-cmp-1 [data1]="main?.data1" (onShowMe)="onShowMe($event)"></my-cmp-1> 
</div> 

---

MyCmp1.ts

import { Component, EventEmitter } from '@angular/core'; 
import { Input, Output } from '@angular/core'; 

@Component({ 
    selector: 'my-cmp-1', 
    templateUrl: 'build/components/myCmp1/myCmp1.html' 
}) 

export class MyCmp1 { 
    @Input() data1: any; 
    @Output() onShowMe = new EventEmitter(); 

    showMe(event: Event, data: any): void { 
     event.preventDefault(); // If you are using <a> or etc. 
     this.onShowMe.emit(data); 
    } 
} 

MyCmp1.html

<h3>My Component 1</h3> 
<a href="" (click)="showMe($event, 'message from MyCmp1')">Show Me</a>