Ho esperienza in AngularJS e sto iniziando a imparare Angular2. Sono all'inizio del mio percorso di apprendimento, ma sono già bloccato.Componente Angular2 non reso
Posso ottenere uno dei miei componenti per il rendering, ma non l'altro. Sto usando Visual Studio 2013 Ultimate e TypeScript 1.5 beta. Ecco la fonte:
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 risultato e 'semplicemente:
Ciao Alice
Dov'è finito Bob andare?
Grazie!
UPDATE
mi rendo conto che stavo cercando di farlo nel modo sbagliato. La mia intenzione era quella di avere il componente display nidificato all'interno del componente my-app, ma il modello di my-app non includere gli ingredienti necessari:
- Essa non ha incluso un elemento
<display></display>. Questo è stato invece incluso nel livello superioreindex.html, che era il posto sbagliato. - L'annotazione della vista non includeva il componente di visualizzazione come riferimento di direttiva.
Insomma, quello che avrei dovuto era:
app.ts (vista annotazione)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
E inoltre ho dovuto importare il mio componente di visualizzazione in app.ts:
import { DisplayComponent } from 'displ';
'bootstrap (DisplayComponent);'? – nada
@nada è necessario eseguire il bootstrap di ogni componente? –
di solito abbiamo solo bisogno di eseguire il bootstrap del componente root e abbiamo inserito gli altri componenti al suo interno come direttive. Questo è stato solo il bootstrap della root. se si esegue il boot dei due componenti separatamente saranno due distinte applicazioni Angular 2 –