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 { }