Angular 7 - Javascript in HTML-Component Templates

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Nabend,

ich weiß zwar nicht, ob die Frage hier in das Forum passt, aber vielleicht ist hier jemand, der sich auskennt.
Ich bin etwas verwirrt. Es wird gesagt, dass man Javascript auch in Angular-Projekten verwenden kann. Das gilt leider nur in der index.html Datei in der die Komponenten im body-tag geladen werden. Javascript als solches kann man nur im head dieser Datei verwenden aber den script tag kann man an sich nicht in den Komponenten selbst anwenden. Also ist man limitiert, was das Verwenden von Javascript angeht, oder übersehe ich da was?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.066
428
83
Berlin
Du schreibst in Angular den gesamten JavaScript-Code innerhalb der Komponenten. Das Script-Tag brauchst du nicht, und auch in der index.html sind normaler Weise keine Anpassungen notwendig. Die Inkludierungen macht das Framework selbständig, sofern du das Projekt per Angular-CLI erstellst.
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Du schreibst in Angular den gesamten JavaScript-Code innerhalb der Komponenten. Das Script-Tag brauchst du nicht, und auch in der index.html sind normaler Weise keine Anpassungen notwendig. Die Inkludierungen macht das Framework selbständig, sofern du das Projekt per Angular-CLI erstellst.
Die Komponente ist ja in vier Dateien aufgeteilt (Außnahme die app-Komponente). In der app.component.ts Datei benutzt man Typescript. Ich frage mich jedoch, ob ich in der app.component.html Datei einen script-tag benutzen kann, um Javascript zu verwenden und nicht Typescript
 

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Nein, da gehört kein Script-Tag hin. TypeScript wird von Angular zu JavaScript kompiliert. Das ist ähnlich wie bei SASS.
Also gibt es keine Möglichkeit normal Javascript zu verwenden und muss ausschließlich TypeScript verwenden? Schade..

Eine Frage habe ich da noch: Kann man nicht einzelne Komponenten laden, ohne dass z.B. die Navigation bleibt?

Im app.component.html:

Code:
<ul>
    <li><a routerLink="nav" routerLinkActive="active">Nav</a></li>
 </ul>
<router-outlet></router-outlet>
Ein Link zum nav.component.html. Jedoch bleibt der Code im app.component.html. Kann man nav.component.html so laden, dass der Code nicht bleibt und er nicht zu sehen ist und nur der des nav-Komponenten?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.066
428
83
Berlin
Wieso setzt du einen Link zur Navigation? Die ist doch keine eigenständige Seite, sondern soll auf allen Seiten zu sehen sein.

Die Nav-Component wird per Selector in die app.component.html eingebunden. Also so was wie
HTML:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Wieso setzt du einen Link zur Navigation? Die ist doch keine eigenständige Seite, sondern soll auf allen Seiten zu sehen sein.

Die Nav-Component wird per Selector in die app.component.html eingebunden. Also so was wie
HTML:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
So hatte ich es auch vor, aber ist es theoretisch möglich, eine Komponente zu laden, welche die ganze Seite in Anspruch nimmt, also auf der die Navigation nicht mehr zu sehen ist nach dem Laden, sondern wirklich nur die Komponente auf die man geklickt hat

Die Frage bezieht sich nicht konkret auf die Navigation, sie dient hier nur als Beispiel.
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.066
428
83
Berlin
Es wird alles erstes die Root-Komponente und alles, was dort inkludiert ist, geladen, also in der Regel die die app-component. Was nicht auf allen Unterseiten sichtbar sein soll, darf nicht in der app-component stehen.
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Es wird alles erstes die Root-Komponente und alles, was dort inkludiert ist, geladen, also in der Regel die die app-component. Was nicht auf allen Unterseiten sichtbar sein soll, darf nicht in der app-component stehen.
Genau das ist der Punkt, an dem ich nicht weiterkomme. Es gibt nie die Möglichkeit eine einzelne component zu laden, egal wie man sie auch "nested" bzw. inkludiert... Hast du da eine Ahnung, wie das vielleicht funktionieren könnte?

Nur ein Beispiel:
Wenn die Startseite zum Einloggen gedacht ist und zum Dashboard weiterführen soll nach dem einloggen, dann ist das Html Template, das zum Einloggen gedacht ist, auch ständig sichtbar, oder etwa nicht?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.066
428
83
Berlin
Nicht wirklich. Laden bedeutet, dass eine Klasse instanziiert wird und das betrifft lediglich die zur Route gehörende und per Template eventuell eingebundene weitere Komponenten. In dem Moment, wo du zu einer anderen Route navigierst, wird die vorherige Klasseninstanz destroyed.
 

Tabula_Rasa

Mitglied
12 Mai 2017
171
2
18
Nicht wirklich. Laden bedeutet, dass eine Klasse instanziiert wird und das betrifft lediglich die zur Route gehörende und per Template eventuell eingebundene weitere Komponenten. In dem Moment, wo du zu einer anderen Route navigierst, wird die vorherige Klasseninstanz destroyed.
Hm.. hättest du da ein Link im Bezug darauf oder ein Example-Code zum Verstehen?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.066
428
83
Berlin
Ich bin Angular-Entwickler und kann dir viele Fragen zu der Materie beantworten. Aber am Anfang steht wie üblich ein Tutorial, dass du durcharbeiten musst, um die Basics zu verstehen.
 
Reactions: Tabula_Rasa
Werbung:

Latest posts