Winkel 2, mit Körper als root-Selektor, statt meiner-app
Gibt es Nachteile für die Verwendung der <body>
- tag statt einige <my-app>
tag für die root-Komponente?
import 'package:angular2/angular2.dart';
@Component(
selector: 'body',
template: '''
<h1>My First Angular 2 App</h1>
<div>{{greet}}</div>
''',
styles: const ['''
:host {
height: 100vh;
}
h1 {
color: red;
}
'''])
class AppComponent {
String greet = 'Hello world';
}
(Der code hier ist Dart, aber ich hoffe, es ist nahe genug, um ES6, Typoskript für andere Menschen zu verstehen.)
Ich sehe das nicht oft, also denke ich, es gibt einen guten Grund dafür, aber das scheint mir nett zu mir, sonst haben Sie grundsätzlich zwei root-Komponenten, Körper, und mein-app.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie möchten, Winkel zu kontrollieren, die ganze Seite nur verwenden
body
als Selektor.Siehe auch Wie ändere ich die body Klasse über ein Typoskript-Klasse (angular2)
Wenn Sie "Körper", wie die Auswahl für Ihre app, dann funktioniert es, aber es gibt einige Probleme:
Die Web-Komponente-Spezifikation sagen verwenden benutzerdefinierte Elemente oder benutzerdefinierte Attribute und es keine offiziellen html-Elemente.
Den offiziellen style guide schlägt vor, die Option 'benutzerdefiniertes Präfix' für Ihre Komponenten, wie 'myComponent'. Auch, wenn Sie wollen verwenden Sie einige linter wie tslint mit den Komponenten-Selektor-Präfix' config um zu überprüfen, dass es demnächst eine Warnung für die Verwendung von 'Körper' selector, ohne Präfix.
Wenn Sie innerhalb des Selektors (body) gibt es einige Elemente, werden Sie ausgeblendet werden, für Winkel -, vielleicht werden Sie wollen, um einige 'scripts' im inneren des Körpers oder an einer anderen Komponente, zum Beispiel "webpack" setzen Sie die Skripts in der Unterseite des Körpers, und vielleicht klappt es doch nicht wie erwartet ...
Besten.
-
), aber Sie bedeuten nicht viel in Angular2. Das Präfix spielt keine Rolle für das root-Element. Dies ist nur zu vermeiden, Konflikte im tag-Namen und CSS, wenn mehrere Komponenten-Bibliotheken verwendet werden, so dass Sie nicht haben zwei verschiedene Komponenten, die beide den Namen<fancymenu>
. Der Letzte Punkt ist definitiv gültig. Winkel beschneiden wird der Inhalt des Tags, wo die Wähler die root-Komponente entspricht.Können Sie und nichts schlimmes passieren wird (es sei denn, Sie haben zwei body-tags). Noch, tun Sie es nicht, weil:
Seite nach unten
Den Selektor widerspiegeln sollte, etwas einzigartiges zu Ihrer app.
Um ehrlich zu sein, der Rahmen ist noch sehr neu und wir haben nicht wirklich eine Antwort. Dass gesagt wird, die technisch ich glaube nicht, dass es irgendetwas gibt, das wird brechen, wenn Sie
<body>
als das root-element, aber konzeptionell ich denke, es legt Sie in eine Ecke, dass Sie schließlich wieder zu bewegen, mit einem custom root-element später.Zum Beispiel kann es einige statische styling oder Elemente, die Sie möchten, auf der Seite, die Winkel nicht kontrolliert, gehört aber nicht auf
<body>
zum Beispiel, wenn Sie mit einem CSS-framework wie bootstrap möchten Sie vielleicht, um wickeln Sie Ihre Website in einerclass="container"
oder vielleicht haben Sie einen statischen Kopf-oder Fußzeile auf der Seite, die enthält einfach links. Diese könnten natürlich genauso gut behandelt-Komponenten.Andere Sache zu prüfen ist, browser-Unterstützung, dies könnte sehr gut funktionieren in einigen Browsern, aber nicht in anderen, noch nicht sicher.
Also denke ich, die Antwort ist "das wissen Wir noch nicht", so war dies eine ziemlich gängige Praxis, mit
ng-app
in der vorherigen version, es könnte etwas gewesen sein, das war überlegt, aber da die meisten Beispiele aus dem team zeigen mit einem custom root-element, wie der empfohlene Weg, könnte es ein Grund dafür, dass wir noch nicht wissen.Weitere Gedanken: Was ist mit
<html>
als das root-element... ? Wer weiß.Alle Freunde oben rechts über die Seiten nach unten. Aber was
<body foo-root>
?