14
У меня есть опыт работы в AngularJS, и я начинаю изучать Angular2. Я нахожусь в самом начале моего учебного путешествия, но я уже застрял.Компонент Angular2 не отображается
Я могу получить один из моих компонентов для рендеринга, но не другого. Я использую Visual Studio 2013 Ultimate и TypeScript 1.5 beta. Вот источник:
index.html
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<display></display>
<script>
System.import('app');
System.import('displ');
</script>
</body>
</html>
app.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app',
})
@View({
template: '<h1>Hello {{ name }}</h1>',
})
// Component controller
export class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
bootstrap(MyAppComponent);
displ.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'display'
})
@View({
template: '<h1>xxxHello {{ name }}</h1>',
})
// Component controller
export class DisplayComponent {
name: string;
constructor() {
this.name = 'Bob';
}
}
Th е результат просто:
Здравствуйте Алиса
Где Боб идти?
Спасибо!
UPDATE
Я понимаю, что я пытался сделать это неправильный путь. Мое намерение состояло в том, чтобы иметь display компонента вложен внутри my-app компонента, но шаблон my-app не включает необходимые ингредиенты:
- Это не включает в себя
<display></display>элемента. Вместо этого он был включен в верхний уровеньindex.html, который был для него неправильным. - Аннотации представления не включают компонент отображения в качестве ссылки на директиву.
Короче говоря, что я должен был был:
app.ts (вид аннотаций)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
А также я должен был импортировать мой компонент отображения в app.ts:
import { DisplayComponent } from 'displ';
'bootstrap (DisplayComponent);'? – nada
@nada необходимо загружать каждый компонент? –
обычно нам нужно только загрузить корневой компонент, а остальные компоненты внутри него включены в качестве директив. Это было нам нужно только для загрузки корня. если вы загрузите два компонента отдельно, они будут двумя отдельными приложениями с угловым 2 –