Bootstrap Angular 2 auf DOM-Element wie in Angular 1

Ist es möglich, bootstrap Angular 2 on a DOM element wie Angular 1? In Angular 1 war es beispielsweise möglich, das Title-Tag in der <head> zu ändern. In Angular 2 scheint es, dass Sie my-app zum <html> Tag hinzufügen müssen. Ich habe eine plunker erstellt, wo Sie sowohl Angular 1 und Angular 2 bootstrapped haben.Bootstrap Angular 2 auf DOM-Element wie in Angular 1

Angular 1

index.html

<body> 
    <div ng-controller="MainCtrl"> 
    <h2>Hello {{name}}</h2> 
    </div> 
</body>

app.js

angular.element(document).ready(function() { 
    angular.bootstrap(document.documentElement, ['plunker']); 
});

Angular 2

index.html

<body> 
    <my-app>Loading...</my-app> 
</body>

main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {App} from './app'; 

bootstrap(App, []) 
    .catch(err => console.error(err));

Quelle

2016-03-22 Ferdi Emmen

Für Änderung des Titels gibt es die Title Service. Sie können es injizieren und benutzen, um den Titel zu manipulieren.

Direkte Unterstützung, um mehr als nur den Titel zu ändern, ist geplant.

Das Hinzufügen von my-app zu <html> funktioniert in Angular nicht gut, weil es den HTML-Code innerhalb des Tags löscht, der mit dem Selektor Ihrer Root-Komponente übereinstimmt.

Quelle

2016-03-22 15:26:22

Vielen Dank für Ihre Antwort! Der Titel-Tag war ein Beispiel. Was ist, wenn Sie zwei eckige 2 Komponenten in der index.html haben. Wie und Wie bekomme ich Angular 2 Bootstrap beide in einem Bootstrap. Nicht Bootstrap (Appname) für alle Komponenten, denke ich? –

Nicht sicher, was Sie mit "Bootstrap beide in einem Bootstrap" meinen. Wenn Sie zwei Wurzelelemente haben (zwei Komponenten in 'index.html'), handelt es sich um zwei verschiedene Angular2-Anwendungen. Es gibt jedoch Workarounds, um eine 'Injektor'-Instanz zu teilen (ich habe es nicht versucht, aber ich habe es erwähnt). –

Nun in Angular 1 können Sie einfach einen Controller zu einem div in der index.html und einen anderen Controller zu einem anderen div hinzufügen und sie über einen Dienst kommunizieren lassen. Oder schreibe einfach {{1 + 2}} in das DOM und es wird von Angular aufgenommen. Sie mussten es nicht in einen 'my-app'-Container/eine Komponente einpacken. –

Bootstrap Angular 2 auf DOM-Element wie in Angular 1

Antwort

Verwandte Themen