angular2 中使用index.ts取代引用單個組件 (實用）

原文出處：https://www.jianshu.com/p/7cc53e7d2938 （原文更易閱讀）

CK110關注

2016.07.30 19:26:30字數 77閱讀 1,256

1. 基礎環境配置

• angular2 rc4 版本
• 按照官網的webpack 配置

2. 第一種方式

src/app/components/contains/contain1.ts

import { Component } from '@angular/core';
@Component({    
  selector: 'contain1',   
  template: `        
    <div>            
      <h3> contain1 </h3>        
    </div>       `
})
export class Contain1 {
}

src/app/components/contains/contain2.ts

import { Component } from '@angular/core';
@Component({    
  selector: 'contain2',    
  template: `        
    <div>            
      <h3> contain2 </h3>        
    </div>       `
})
export class Contain2 {
}

一般引用方式：
src/app/app.component.ts

import { Component } from '@angular/core';
import { Contain1 } from './components/contains/contain1';
import {Contain2} from "./components/contains/contain2";

@Component({  
selector: 'my-app',  
directives:[    Contain1,Contain2  ],  
template: `
<contain1></contain1>
<contain2></contain2>
`
export class AppComponent { }

3. 第二種方式

在contains 目錄下 新建index.ts 文件
src/app/components/contains/index.ts

export { Contain1 } from './contain1';
export { Contain2 } from './contain2';

src/app/app.component.ts

import { Component } from '@angular/core';
import { Contain1,Contain2 } from './components/contains'

@Component({  
selector: 'my-app',  
directives:[    Contain1,Contain2  ],  
template: `
<contain1></contain1>
<contain2></contain2>
`
export class AppComponent { }