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

Angular 7 - Javascript in HTML-Component Templates

Tabula_Rasa

Mitglied
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?
 
Werbung:
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.
 
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
 
Werbung:
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?
 
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>
 
Werbung:
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.
 
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.
 
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?
 
Werbung:
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.
 
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?
 
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.
 
Werbung:
Werbung:
Zurück
Oben