Angular2 с TypeScipt: Импорт компонентов в компоненты

Im пытается импортировать компонент, который я сделал, в основной компонент, но его не правильно делает только тестирование ... отображается в браузереAngular2 с TypeScipt: Импорт компонентов в компоненты

это мой главный component.ts файл :

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, View} from 'angular2/core'; 
import {eye} from 'eyeComponent';  //importing components 
import {hair} from 'hairComponent' ; 

@Component({ 
selector : 'helloworld', 
directives : [hair, eye] 
}); 

@View({ 
template : `<div> 
      <hair></hair> 
      <eyes></eyes> 
      </div> 
` 
    }) 
export class helloworld { 

} 

bootstrap(helloworld);

Вот мой файл компонент, который я импортировал

import {bootstrap} from 'angular2/platform/browser'; 
import {Component} from 'angular2/core'; 

@Component({ 
selector : 'eyes', 
template : `<h1> eyes </h1>` 
}); 

export class eye{ 

} 

bootstrap(eye);

Вот еще один файл component.ts:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component} from 'angular2/core'; 

@Component({ 
selector : 'hair', 
template : '<h2>Hair Component <h2>' 
}); 

export class hair{ 

} 

bootstrap(hair);

и это TSconfig, им с помощью кода против язя

{ 

"compilerOptions": { 
"target": "es5", 
"module": "system", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": false 
}, 
"exclude": [ 
"node_modules" 
] 

}

А вот файл HTML

<html> 
<head> 
    <title>Angular2 App</title> 
    <script src="node_modules/es6-shim/es6-shim.js"></script> 
    <script src="node_modules/es6-promise/dist/es6-promise.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"> 

    </script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

    <script> 
     System.config({ 
      packages : { 
       app : { 
        format : 'register', 
        defaultExtension : 'js' 
       } 
      } 
     }); 
     System.import('app/app').then(null, console.error.bind(console)); 
    </script> 


    </head> 
    <body> 

    <helloworld>Testing...</helloworld> 

    </body> 
    </html>

источник

2016-01-15 blackHawk

какая у вас структура папок? в инструкции import вы должны указать относительный путь к импортированному компоненту. если они находятся в одной папке, это должно быть: «./eyeComponent», где eyeComponent - это имя файла, из которого вы хотите импортировать. – toskv

См. Обновленный вопрос – blackHawk

Ответ Саймона исправит его. :) – toskv

Вы должны будете предоставить ссылки на файлы, такие как:

import {eye} from './eyeComponent';  //importing components 
import {hair} from './hairComponent' ;

источник

2016-01-15 19:16:40

Я думаю, что это сработает. – AsimRazaKhan

Я играю вокруг, нет succes – blackHawk

@flyingHawk чувствует себя свободно, чтобы принять ответ. – AsimRazaKhan

Angular2 с TypeScipt: Импорт компонентов в компоненты

ответ

Смежные вопросы