Gibt es Nachteile bei der Verwendung des <body> -Tags anstelle eines <my-app> -Tags für die Root-Komponente?
(Der Code hier ist Dart, aber ich hoffe, es ist nahe genug an ES6, Typoskript für andere Leute zu verstehen.)
Ich sehe das nicht oft, also denke ich, dass es einen guten Grund dafür gibt, aber das scheint mir nett zu sein, sonst hast du grundsätzlich zwei root-Komponenten, body und my-app.
Wenn Sie möchten, dass Angular die gesamte Seite kontrolliert, verwenden Sie body als Selektor.
Siehe auch Wie ändere ich den Körper? Klasse über eine Typoskript-Klasse (angular2)
Wenn Sie "body" als Selektor für Ihre App verwenden, funktioniert es zwar, aber es gibt einige Probleme:
Die Spezifikation der Webkomponente besagt, dass benutzerdefinierte Elemente oder benutzerdefinierte Attribute verwendet werden sollen und keine offiziellen HTML-Elemente verwendet werden.
Der offizielle Styleguide empfiehlt die Verwendung eines benutzerdefinierten Präfix für Ihre Komponenten wie 'myComponent' . Auch wenn Sie einen Linter wie tslint mit der 'component-selector-prefix'-Konfiguration verwenden möchten, um dies zu überprüfen, wird eine Warnung für den' body'-Selektor ohne Präfix ausgegeben.
Wenn sich innerhalb des Selektors (Körper) einige Elemente befinden, werden sie für eckige verborgen, vielleicht möchten Sie einige 'Skripte' in den Körper oder eine andere Komponente, zum Beispiel 'webpack' setzen die Skripte im unteren Teil des Körpers, und vielleicht wird es funktionieren, aber nicht wie erwartet ...
Beste.
Um ehrlich zu sein, der Rahmen ist noch sehr neu und wir haben keine wirkliche Antwort darauf. Nichtsdestotrotz glaube ich, dass es nichts gibt, was kaputt gehen wird, wenn Sie <body> als root-Element verwenden, obwohl ich konzeptionell denke, dass es Sie in eine Ecke versetzt, dass Sie später wieder zu einem benutzerdefinierten root-Element zurückkehren .
Zum Beispiel kann es auf der Seite, die angular nicht kontrolliert, etwas statisches Styling oder Elemente geben, aber nicht in <body> . Wenn Sie beispielsweise ein CSS-Framework wie Bootstrap verwenden, können Sie Ihre Site umbrechen in class="container" oder haben Sie vielleicht eine statische Kopf- oder Fußzeile auf der Seite, die einfach Links enthält. Diese könnten natürlich genauso einfach in Komponenten gehandhabt werden.
Ein weiterer Punkt, den es zu beachten gilt, ist die Browser-Unterstützung. Dies könnte in einigen Browsern sehr gut funktionieren, in anderen jedoch noch nicht, noch nicht sicher.
Ich denke also, die Antwort lautet: "Wir wissen es noch nicht", da dies mit ng-app in der vorherigen Version ziemlich üblich war, könnte es etwas gewesen sein, über das gedacht wurde, obwohl die meisten Beispiele aus der team show verwendet ein benutzerdefiniertes root-Element als empfohlenen Weg, es könnte einen Grund dafür geben, den wir noch nicht kennen.
Weitere Gedanken: Wie wäre es mit <html> als Wurzelelement ...? Wer weiß.
Tags und Links angular typescript dart