Angular - Jak Zarządzać Jednym divem zawartością innego diva

0

Witam mam problem ,
Ogólnie mam stronę stworzoną przez html (bardzo prosta) ,od nie dawna zacząłem sie bawić w angularze .I chciałbym zmodyfikować ją do angulara
Mniej więcej wygląda to tak http://wojcik.technikuminformatyczne.eu/03/ .W jaki łatwy sposób mógłbym skonstruować by poprzez (input) klikając na diva o nazwie np: Windows 1, zmieniała mi się zawartość tekstu niżej w tak zwanym divie "midmid" ?

HTML głównej strony w angularze wygada identycznie (jedynie bez ) dla nazw windowsów.

PS : Najlepiej gdyby po kliknięciu na dany DIV (z menu) był tylko wyłącznie tekst .

Z góry dziękuje

0

Nie mam pojęcia, jak to zrobić w Angularze, ale bez Angulara, zrobiłabym np. tak:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>

<div class="menu2" id="windows_1">Windows 1</div>
<div class="menu2" id="windows_2">Windows 2</div>
<div class="menu2" id="windows_3">Windows 3</div>
<br><br>
<div id="midmid">tu mi pisz</div>

<script>
function zmien_tresc(id_zmieniany, el_zmieniajacy) {
  document.getElementById(id_zmieniany).innerHTML = tabela_tresci[el_zmieniajacy.id];
}

tab_el_zmieniajace = document.querySelectorAll(".menu2");
for (nr=0; nr<tab_el_zmieniajace.length; nr++) {
  tab_el_zmieniajace[nr].addEventListener("click", function() {zmien_tresc("midmid", this);});
}

tabela_tresci = new Array;
tabela_tresci["windows_1"] = "Windows 1 to było coś";
tabela_tresci["windows_2"] = "Windows 2 było jeszcze lepsze";
tabela_tresci["windows_3"] = "Windows 3 było de best of de best :)";
</script>

</body>
</html>
0
Freja Draco napisał(a):

Nie mam pojęcia, jak to zrobić w Angularze, ale bez Angulara, zrobiłabym np. tak:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>

<div class="menu2" id="windows_1">Windows 1</div>
<div class="menu2" id="windows_2">Windows 2</div>
<div class="menu2" id="windows_3">Windows 3</div>
<br><br>
<div id="midmid">tu mi pisz</div>

<script>
function zmien_tresc(id_zmieniany, el_zmieniajacy) {
  document.getElementById(id_zmieniany).innerHTML = tabela_tresci[el_zmieniajacy.id];
}

tab_el_zmieniajace = document.querySelectorAll(".menu2");
for (nr=0; nr<tab_el_zmieniajace.length; nr++) {
  tab_el_zmieniajace[nr].addEventListener("click", function() {zmien_tresc("midmid", this);});
}

tabela_tresci = new Array;
tabela_tresci["windows_1"] = "Windows 1 to było coś";
tabela_tresci["windows_2"] = "Windows 2 było jeszcze lepsze";
tabela_tresci["windows_3"] = "Windows 3 było de best of de best :)";
</script>

</body>
</html>

Umiałbyś ten JS zamienić na TypeScript ??

0

Bez przesady, myślę, że poradzisz sobie z przepisaniem do Angulara tego, co dostałeś :D
Wystarczy, że użyjesz zwykłego click'a i ElementRef

0
Kondziowsky napisał(a):

Bez przesady, myślę, że poradzisz sobie z przepisaniem do Angulara tego, co dostałeś :D
Wystarczy, że użyjesz zwykłego click'a i ElementRef

OOO Własnie chyba tego potrzebowalem ! ElementRef , wpisuje to z poziomu ts tak ? I to (click) ma byc w derektywie ng yup ? Dobrze rozumiem ?

0

(click) na divie, który wywołuje zmianę

@Edit Jeżeli byłby przypadek, w którym musiałbyś wykorzystać taką funkcję w wielu miejscach (komponentach) polecam stworzyć jakiś serwis.

0
Kondziowsky napisał(a):

(click) na divie, który wywołuje zmianę

@Edit Jeżeli byłby przypadek, w którym musiałbyś wykorzystać taką funkcję w wielu miejscach (komponentach) polecam stworzyć jakiś serwis.

Hmm okej ,a co sądzisz o składni "template" w TypeScripcie >>??

1 użytkowników online, w tym zalogowanych: 0, gości: 1